jQuery - 多个重叠的 Droppables 导致不可预测的丢弃答案

【问题标题】：jQuery - Multiple Overlapping Droppables Result in Unpredicable DropsjQuery - 多个重叠的 Droppables 导致不可预测的丢弃
【发布时间】：2010-11-05 17:50:38
【问题描述】：

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

这里是droppable的源代码：

        $(".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) 一次突出显示一个图块，并且 b) 将突出显示的图块放置在对象上。

我尝试了所有类型的容忍都无济于事。

图片：

i.imgur.com/dGx9X.png

和

i.imgur.com/vb1d9.png

【问题讨论】：

标签： jquery-ui droppable

【解决方案1】：

当 drabbable 移动到一个 droppable 上时，您应该停用所有其他 droppable 并激活当前的 droppable。那么就很简单的把drop效果变成active droppable了。

在over函数中

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

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

【讨论】：