jQueryハイライトボックスにドラッグ＆ドロップ

Question

私はこのスクリプトを持っています。私は兵士が強調表示されたボックスにのみドロップされることを望んでいました。 私は$（selector）とrevert： "invalid"を受け入れようとしましたが、強調表示されていないボックスにもドロップされないようです。

Answer 1

最初にすべてのdroppablesを無効にしてから、ドラッグ開始ルーチン中に$('.cell .validmove')をドロップ可能にし、有効なセルに入れないときに戻るように、revert: "invalid"オプションをドラッグ可能に追加します。ちなみに、drag()イベントのルーチンをstart()に、stop()に戻した方が、drag()イベントが移動中に連続して発生するので、おそらく良いでしょう。

unit.draggable({ 
    start: function() { 
     startGrid.addClass("validmove").droppable("option", "disabled", false); 
    }, 
    stop: function() { 
     startGrid.removeClass("validmove").droppable("option", "disabled", true); 
    }, 
    cursor: "move", 
    revert: "invalid" 
}); 

あなたはユニットのいずれか、グリッドにスナップdraggable()のグリッド/スナップオプションを使用することを指示し、または場所にしてユニットをアニメーション化するdrop()イベントでいくつかのコードを追加したい場合。

NB。 CSSがChromeで正常に動作していない、グリッドが表示されない、Firefoxでうまく動作する