javascript - jQuery - 获取放置元素的相对位置和属性

Question

我有可拖动的元素，可以将其放置在可放置区域中。如果删除了一个元素，则调用 drop 函数:

$('#droppable').droppable({
    scope: "items",
    drop: function (event, ui) {
        // this one is called if an element is dropped in this droppable area
    }
});

我的可拖动元素:

<div class="drag" data-noteid="10">Drag me</div>
...
$('.drag').draggable({
    revert: "invalid",
    scope: "items"
});

如果元素被放置，我需要知道的是data-noteid的值和可放置区域的相对位置。因此，如果将元素放在左上角，则 x/y 坐标必须为 0/0。

我在这里创建了一个完整的工作示例:http://jsbin.com/utivo5/2/

所以通常我可以像这样访问属性:

alert($(this).data("noteid"));

alert($(this).position().top);
alert($(this).position().left);

但在这种情况下我得到的只是undefined。

有人知道我如何访问它们吗？我认为 event 或 ui 一定是可能的，它是被调用的 drop 函数的参数？!

在此先感谢您，并向您致以最诚挚的问候，蒂姆。

Answer 1

在这种情况下，您希望 ui 参数获取可拖动对象，而不是 this ，它指的是可放置区域，特别是 ui.draggable 这里。整体应该是这样的:

drop: function (event, ui) {
  var pos = ui.draggable.offset(), dPos = $(this).offset();
  alert("nodeid: " + ui.draggable.data("noteid") + 
        ", Top: " + (pos.top - dPos.top) + 
        ", Left: " + (pos.left - dPos.left));
}

对于位置，我们需要减去 droppable 的顶部/左侧位置以获得您想要的值，即上面被删除的 dPos。

You can test your demo with the above changes working here .