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是droppable中的path ，也是放置后設置為該類的path 。 當您使用可拖動對象輸入該可放置對象並退出時，它會刪除您的課程。 為什么不創建兩個具有相同樣式規則的單獨的類，然后將一個用作hoverClass ，另一個用作放置的類。

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

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/