jQuery UI Droppable類

Question

結束於http://lab.2toria.com/reflex/index2.php我已經開始研究構建遊戲的想法。

如果您單擊並將右側的塊拖動到主網格，您會看到，當您拖動它時，塊會突出顯示。如果你掉下來，這些方塊會變成深灰色的邊框。這很好，但是如果您將一個塊拖動到已經深灰色的單元格/塊上，則在您將其忽略時重置爲淺灰色的默認值。

我需要做些什麼來阻止這種情況的發生？我希望深灰色的塊保持這種顏色。

Answer 1

你hoverClass是，這也是一旦放棄你所設置的類可放開path。當你用可拖動的方式輸入該droppable並退出時，它會刪除你的班級。爲什麼不創建兩個具有相同樣式規則的獨立類，並使用一個作爲hoverClass而另一個作爲丟棄的類。

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

Answer 2

替換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 3

這可能有點多餘，但您可以爲懸停類和放置塊時應用的類製作單獨的類。

所以，你將不得不

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

然後你投擲的功能將是

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

http://jsfiddle.net/aymhZ/