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上面的删除.

您可以使用上述更改来测试您的演示.