如何从居中的div中的可移动div获得安全的左位置规​​格？

Question

我正在尝试通过几种窗口解决方案和尺寸来为我的可移动div获取安全的位置规范。 我想在可放置区域（＃drop1）的左侧放置一个0位置。 jQuery函数position（）不足以完成此任务。我的意思是可以理解的吗？ 我在这里警告了多个位置规格以及它们之间的差异，但是我的可移动div的位置没有得到稳定的结果。 jsFiddle

alert('e.pageY-this.offset().top:'+(e.pageY - $(this).offset().top)+"\n"
     +'e.pageX-this.offset().left: '+(e.pageX - $(this).offset().left)+"\n"
     +'e.pageX/e.pageY: '+e.pageX+'/'+e.pageY+"\n"
     +'offset(left/top): '+$(this).offset().left+'/'+$(this).offset().top+"\n"
     +'posLeft/pos.top: '+pos.left+'/'+pos.top+"\n"
     +'draggable.position(left/top): '+ui.draggable.position().left+'/'+ui.draggable.position().top+"\n"
     +'draggable.offset(left/top): '+ui.draggable.offset().left+'/'+ui.draggable.offset().top+"\n"
     +'dropPositionX-dragItemOffsetX: '+dropPositionX+' - '+dragItemOffsetX+"\n"
     +'innerWidth: '+window.innerWidth+"\n"
     +'Main centered area width: '+$('#main').css('width')+'- bar left width: '+$('.col').css('width')+"\n"
     +'position calculated: '+((window.outerWidth/2-parseInt($('#main').css('width'))/2+100)));

HTML：

<div align="center" width="100%">
 <div id="drag1" class="ui-widget-content" rel="a"><p>drag 1</p></div>
 <div id="drag2" class="ui-widget-content" rel="b"><p>drag 2</p></div>

 <div id="main">
   <div class="col">&nbsp;</div>
   <div id="drop1" class="bg1">
    <div id="drop-inner1" class="widget1"><p>AREA 1</p></div>
    <div id="drop-inner2" class="widget1"><p>AREA 2</p></div>
   </div>
   <div class="col">&nbsp;</div>
 </div>
</div>

<div style="clear: both;">&nbsp;</div>

Answer 1

我自己找到了解决方案。

这就是我要搜索的内容：

  var diffDragX = (ui.draggable.offset().left - $('#drop1').offset().left);
  var diffDragY = (ui.draggable.offset().top - $('#drop1').offset().top);