javascript - jQuery UI 可放置类

Question

在http://lab.2toria.com/reflex/index2.php上，我已经开始为我正在构建的游戏构思一个想法。

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

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

Answer 1

你hoverClass在pathdroppable 中，一旦你放弃，这也是你设置的类。当您使用可拖动进入该 droppable 并退出时，它会删除您的类。为什么不创建两个具有相同样式规则的单独类，并将一个用作 the hoverClass，另一个用作丢弃的类。

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

Answer 2

这可能有点多余，但是您可以为悬停类和放置块时应用的类创建一个单独的类。

所以你会有

.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/

Answer 3

替换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");
        }
    });
});