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

Question

我有一个关于拖放的问题，希望你们中的一个已经解决了。我有一个在线web应用程序，我可以在DIV上的图像上拖放注释(箭头、星形)。

这里有一些需要知道的事情。1)图像可以是任意大小(有时大有时小) 2)包装器的DIV可以左对齐或居中3)包装器的DIV可以是固定的或自动的

那么，有没有什么可行的解决方案可以让注释的位置始终相对于图像的左上角呢？所以

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

谢谢!

Answer 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);
   }
});