Untitled

<html><head>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<style> #divContainer, #divResize {border:ridge 7px #DDD; left:100px; top:50px; width:120px; height:120px; background-color:#F0F; cursor:move; float:left;}
</style></head>


<body>
<div id="debug" style="position:absolute;z-index:0;font-size:9px;"></div>
<div><div id="divResize"> I am Draggable and Resizable </div></div>

</body>

<script>var element_pos = 0; var iCnt = 0;
$(document).ready(function() {
    $(function() {$('#divContainer').draggable();});
    $(function() {$("#divResize").draggable().resizable();});
    $('#Any').click(function() {
        var dynamic_div = $(document.createElement('div') ).css(
        {position: 'absolute', zIndex:'10', left:element_pos, top:$('#divContainer').height()+20, width:'120', height:'120'});
        element_pos = element_pos + $('#divContainer').width() + 20; iCnt = iCnt + 5;
});});</script>


<script>setInterval( function refreshvalues(){
var dRheight = document.getElementById('divResize').style.height;
var dRwidth = document.getElementById('divResize').style.width;
var dRleft = document.getElementById('divResize').style.left;
var dRtop = document.getElementById('divResize').style.top;

document.getElementById("debug").innerHTML = (dRheight+"<br>"+dRwidth+"<br>"+dRleft+"<br>"+dRtop);
},1000)</script>

</html>