Question

我正在尝试将一个元素放在多个可放置的DIV之上，但我遇到了事件冒泡的问题。 droppable事件会根据彼此重叠的元素数量多次执行。我想只为最后一个/顶部元素执行它。

HTML：

<div id="1" class="box droppable">1
    <div id="2" class="box droppable">2
        <div id="3" class="box droppable">3</div>
    </div>
</div>

<div id="drag" class="draggable">Drag me! I dare you!</div>

<div id="output"></div>

jQuery的：

$(function () {
    $(".draggable").draggable({
        revert: "invalid"
    });

    $(".droppable").droppable({
        tolerance: 'pointer',
        drop: function (event, ui) {
            content = $('#output').html();
            $('#output').html(content + "Dropped "+ui.draggable.prop('id') + " on " +$(this).attr('id')+".<br/>");   
        }
    });
});

当您在元素1上放下拖动时，它会说你将它放在1上。这是正确的。如果你将它放在元素3上，它会说你把它放在1,2,3上。 我需要将此限制仅限于第三个/最顶层元素。我该如何实现这一目标？

我过去经历过这种情况，需要确认，因此可放置的目标ID可以存储在不可见的字段（最后一个值）中，但我需要直接制作这一次，没有解决方法：（

谢谢！

Answer 1

如果我只是懒得浏览一下文档。这个问题的解决方案can be found here。通过指定greedy选项，用户可以限制受影响的可放置元素。

换句话说

$(".droppable").droppable({
    tolerance: 'pointer',
    greedy: true, //limit to only top-most droppable element
    drop: function (event, ui) {
        content = $('#output').html();
        $('#output').html(content + "Dropped "+ui.draggable.prop('id') + " on " +$(this).attr('id')+".<br/>");   
    }
});

jQuery UI可放置限制到最后一个元素

1 个答案: