javascript - jQueryUI 拖动的项目为第一个可放置后面的每个元素触发放置

Question

为了演示，我创建了这个 fiddle :http://jsfiddle.net/Lxmr1n4p/4/

在网页游戏中，我有几个绝对定位且一层一层的层。在这些层中有可放置的元素。

在 fiddle 中，我制作了一个黑色 div 作为可拖动元素。如果我将它放在大的中灰色放置目标上，它会正确发出警报，它落在第 2 层上。

但是如果我把它放在深灰色区域，它会说它放在第 2 层，当我单击“确定”时，它还会提醒它放在第 1 层，这是我不想要的，因为(除此之外它位于第 1 层)第 2 层中的项目)，第 1 层中的项目与此操作无关，其上方是一个完整的层。

这是布局:

<div class="layer1">
    <div class="r">
        <div class="item"></div>
    </div>    
</div>
<div class="layer2">
    <div class="r">
        <div class="item"></div>
    </div>
</div>

<div class="drag"></div>

div.r 只是制作一个相对框。

这是我的 JavaScript:

$(document).ready(function () {
    $('.layer1 .item').droppable({
        drop: function () {
            greedy: true,
            alert('dropped on item in layer 1');
        }
    });

    $('.layer2 .item').droppable({
        drop: function () {
            greedy: true,
            alert('dropped on item in layer 2');
        }
    });

    $('.drag').draggable({});
});

有没有办法告诉 jqueryui 我只希望最上面的项目触发 drop 事件？ 这个示例不是真正的游戏代码，因为它太大了。

Answer 1

您好，您可以在悬停时禁用其他可放置元素:

over: function(event, ui){
      $( ".layer1 .item" ).droppable( "disable" )
},
out: function(event, ui){
     $( ".layer1 .item" ).droppable( "enable" )
 }

http://jsfiddle.net/Lxmr1n4p/5/