Javascript jQuery UI到最后一个元素的可拖放限制

我试图将一个元素放到多个可拖放div的顶部，但我遇到了事件冒泡的问题。可拖放事件会根据元素层叠的数量执行多次。我只想为最后一个/顶部元素执行它

请查看。

HTML:

1
2.
3.
拖我！我敢说你！

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/>");   
        }
    });
});

$（函数（）{
$（“.draggable”）.draggable({
回复：“无效”
});
$（“.droppable”）.droppable({
公差：“指针”，
drop：函数（事件、用户界面）{
content=$（'#output'）.html（）；
$（'#output'）.html（content+“drop”+ui.draggable.prop（'id'）+”位于“+$（this.attr（'id'）+”）”
）上；
}
});
});

当你在元素1上放置Dragable时，它会说你在元素1上放置了Dragable。没错。如果你把它放在元素3上，它会说你把它放在了1，2，3上我需要将此限制为第三个/最上面的元素。我如何才能做到这一点

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

---

谢谢！

如果我不是懒得浏览文档一点的话。这个问题的解决方案。通过指定

贪婪

选项，用户可以限制受影响的可拖放元素

换句话说

$(".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/>");   
    }
});    

$（“.droppable”）.droppable({
公差：“指针”，
贪婪：true，//仅限于最上面的可拖放元素
drop：函数（事件、用户界面）{
content=$（'#output'）.html（）；
$（'#output'）.html（content+“drop”+ui.draggable.prop（'id'）+”位于“+$（this.attr（'id'）+”）”
）上；
}
});    

如果每次拖放后需要刷新内容，可以删除

content=$（“#output'）.html（）

，也可以从此行

$（“#output'）.html（content+..

@Pavlo我只需要为最后一个元素（ID为3）触发事件。从

div

的

id=1和id=2

中删除

droppable

类怎么样？@Pavlo我不能，它们也必须是可拖放的。@Pavlo感谢您的帮助，但这需要动态的，当然，我不能只对其中的特定元素进行ifs。我想知道

drop

的实现>事件。我需要以某种方式防止传播。至于我，这个答案与你的问题不同。无论如何，很高兴你找到了解决问题的方法。

$(".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/>");   
    }
});