将对象拖放到DIV ..相对于目标DIV的绝对位置和大小

时间:2010-04-22 18:04:43

标签: jquery drag-and-drop position

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

以下是一些需要了解的事情。 1)图像可以是任何尺寸(有时大有时小) 2)包装纸的DIV可以左对齐或居中 3)包装器的DIV可以是固定的或自动的

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

我正在使用jQuery。一旦我删除对象,我将如何获得注释的位置始终相对于图像的左上角?

谢谢!

1 个答案:

答案 0 :(得分:6)

尝试这样的事情。它为可拖动元素和可放置元素提供偏移量。通过一些数学运算,您可以获得相对于droppable左上角的可拖动元素的位置。

$('#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);
   }
});