jquery-ui之jQuery之多个重叠的 Droppables 导致不可预测的下降

我有一个 draggable 被放置在重叠的 droppables 的等距网格上。 droppables 是灰色的瓷砖，img 标签，看起来像附加的第一张图片。当可拖动对象位于它们上方时，它们被设置为突出显示蓝色。

这是可放置的源代码:

        $(".sprite").droppable({ 
            drop: function(event,ui) { 
                object_id = ui.draggable.attr("id").replace("sprite_",""); 
                set_action('move_object',$(this).attr("id")); 
                set_target(object_id); 
                ui.draggable.removeClass("holding"); 
            }, 
            over: function(event, ui) { 
                $(this).attr("src",$(this).attr("src").replace('.png','-hover-blue.png')); 
            }, 
            out: function(event, ui) { 
                $(this).attr("src",$(this).attr("src").replace('-hover-blue.png','.png')); 
            }, 
            tolerance: 'pointer' 
        }); 

基本上我希望 a) 一次突出显示一个图 block ，并且 b) 让突出显示的图 block 成为对象放置在其上的图 block 。

我试过各种宽容都无济于事。

图片:

i.imgur.com/dGx9X.png

和

i.imgur.com/vb1d9.png

请您参考如下方法:

当 drabbable 移动到 droppable 上方时，您应该停用所有其他 droppable 并激活当前的 droppable。然后就可以很简单地让事件的 droppable 具有 drop 效果。

在over函数中

$(".sprite").not($(this)).removeClass("over") 
   .each(function(){ 
     $(this).attr("src",$(this).attr("src").replace('-hover-blue.png','.png')); 
   }); 
$(this).addClass("over"); 

然后在 drop 中用 $(".over") 替换 $(this)