<style>
* { margin:0; padding:0; }
#wrapper { position: absolute; width:500px; height:500px; border:3px solid blue; left:100px; top:150px; }
#box { position:absolute; width:100px; height:100px; left:50px; top:50px; background:red; color:white;}
</style>
<script>
$(document).ready(function(){
var box = $('#box');
var positionInfo = $('#position_info');
console.log(box.offset().left);
console.log(box.offset().top);
positionInfo.find('.offsetLeft').text(box.offset().left);
positionInfo.find('.offsetTop').text(box.offset().top);
box.draggable({
drag:function(){
positionInfo.find('.offsetLeft').text(box.offset().left);
positionInfo.find('.offsetTop').text(box.offset().top);
positionInfo.find('.posLeft').text(box.position().left);
positionInfo.find('.posTop').text(box.position().top);
}
});
});
</script>
</head>
<body>
<div id="position_info">
<span>offset().left = </span><span class="offsetLeft">0</span><br>
<span>offset().top = </span><span class="offsetTop">0</span><br>
<span>position().left = </span><span class="posLeft">0</span><br>
<span>position().top = </span><span class="posTop">0</span><br><br>
</div>
<div id="wrapper">
<div id="box"><span>박스당!!!</span></div>
</div>
