Question

我有一个可拖动的东西被丢弃在重叠的可放置的等距网格上。 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

Answer 1

当drabbable移动到droppable上时，你应该停用所有其他droppable并激活当前的droppable。然后将掉落效果放在活动的可放置状态很简单。

在过度功能中

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

然后在drop中用$（“。over”）替换$（this）

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

1 个答案: