5

我有可以拖放到可拖放区域的可拖动元素。如果删除了一个元素，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函数的参数？！

提前谢谢你和最好的问候，蒂姆。

4

2 回答 2

15

在这种情况下，您希望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上面被删除的值。

您可以在此处使用上述更改来测试您的演示。

于 2011-01-03T11:26:04.853 回答
4

对于我的情况，我发现上述方法不起作用。不知道为什么——它总是给我一个 X = -7 和 Y = 229。

但这确实有效（位于 drop 函数处理程序中）：

alert('X pos in drop parent container = ' + (ui.position.top - $(this).offset().top));
于 2012-07-10T15:52:18.923 回答