jQuery UI Droppable类

Question

在http://lab.2toria.com/reflex/index2.php上，我开始研究我正在构建的游戏。

如果单击并将右侧的块拖动到主网格，您将看到，当您拖动它时，块会突出显示。如果你掉落，块会变成深灰色边框。这很好，但是如果你然后将一个块拖过一个已经是深灰色的单元格/块，它会在你越过它时重置为浅灰色的默认值。

我需要做些什么来阻止这种情况发生？我希望深灰色的块保持这种颜色。

Answer 1

替换hover课程，因为它与您的drop课程相同。如果元素上的mouseover添加了类，则在mouseout上删除它。使用不同的类，应该这样做。

$(document).ready(function() {
    //$(".grid").click(function() {
    //     $(this).addClass("path");
    //})
    $("#pathpiece").draggable({
        revert: true,
        revertDuration: 1,
        helper: "clone"
    });

    $(".grid").droppable({
        // Create a hoverPath class
        hoverClass: "hoverPath",
        drop: function(event,ui) {
        $(this).addClass("path");
        }
    });
});

Answer 2

您的hoverClass {1}}在droppable中也是{1}}，也是您放弃后所设置的类。当您使用可拖动和退出输入该droppable时，它将删除您的类。为什么不使用相同的样式规则创建两个单独的类，并使用一个作为path，另一个作为删除的类。

hoverClass

Answer 3

它可能有点多余，但您可以为悬停类和删除块时应用的类创建一个单独的类。

所以你会有

.path {
    border: 2px solid Gray;
}
.dropped {
    border: 2px solid Gray;
}

然后你的droppable函数将是

$(".grid").droppable({
    hoverClass: "path",
    drop: function(event,ui) {
        $(this).addClass("dropped");
    }
});

http://jsfiddle.net/aymhZ/