将对象拖放到 DIV 上。目标 DIV 的相对位置和绝对位置和大小答案

【问题标题】：Drag and drop objects onto a DIV.. relative vs absolute position and size of target DIV将对象拖放到 DIV 上。目标 DIV 的相对位置和绝对位置和大小
【发布时间】：2010-04-22 18:04:43
【问题描述】：

我有一个关于拖放的问题，希望你们中的某个人已经解决了。我有一个在线网络应用程序，我可以在其中将注释（箭头、星号）拖放到 DIV 上的图像顶部。

这里有一些事情要知道。 1）图像可以是任意大小（有时大有时小） 2）wrapper的DIV可以左对齐也可以居中 3) wrapper的DIV可以是固定的也可以是自动的

那么是否有任何可能的解决方案可以使注释的位置始终相对于图像的左上角？所以

我正在使用 jQuery。放置对象后，如何始终获得相对于图像左上角的注释位置？

谢谢！

【问题讨论】：

标签： jquery drag-and-drop position

【解决方案1】：

试试这样的。它为可拖动元素和可放置元素提供了偏移量。通过一点数学计算，您可以获得可拖动元素相对于可放置对象左上角的位置。

$('#droppable').droppable({
   drop: function(event, ui) {
      var thisOffset = $(this).offset()
      var x = ui.offset.left - thisOffset.left;
      var y = ui.offset.top - thisOffset.top;
      alert(x+','+y);
   }
});

【讨论】：

非常感谢。我会检查一下。
很好的解决方案 - 跟进，您可以使用以下方法在这些偏移量上制作您的可放置土地：$(ui.helper).append().css({'top' : y,'left' : x});