ドラッグ可能なアイテムを限定コンテナにスナップする方法

Question

JavaScriptで簡単なブロックパズルゲームを作成する際に問題が1つあります。私はグリッドに要素をスナップしようとしていますが、私の要素がドロップ可能として宣言されているグリッドの限界を壊している場合、ドロップを制限する方法を理解できません。

私はフィドルを作成しました：demo

私はこのコードを使用：

HTML：

<div class="row"> 
     <div class="cell">&nbsp;</div> 
     <div class="cell">&nbsp;</div> 
     <div class="cell">&nbsp;</div> 
     <div class="cell">&nbsp;</div> 
     <div class="cell">&nbsp;</div> 
    </div> 

    <div class="element drag"> </div> 

JS：

$(init); 

function init() { 
    $('.drag').draggable({ snap: ".cell", revert: "invalid" }); 
    $('.cell').droppable({ 
     drop: handleElementDrop 
    }); 
} 

function handleElementDrop(event, ui) { 
    dragger = ui.draggable; 

    dragger.draggable('disable'); 
    $(this).droppable('disable'); 
    dragger.position({ of: $(this), my: 'left top', at: 'left top' }); 
    dragger.draggable('option', 'revert', false); 
} 

位置決めの問題を解決する方法要素がグリッドの外に出た場合のドロップを防止するグリッドの要素、またはそれが非droの場合ppableセル（すでにセルに要素がいくつかあると仮定している場合）？

また、私はHandleElementDrop関数とdraggableの位置で問題を抱えていますが、常にドロップされたセルに対して要素1のセルを配置します。

Answer 1

私はDEMOをいくつか提案しました。

代わり.cellにスナップに100x100のグリッドに設定gridプロパティを使用してみてください：

$('.drag').draggable({ snap: ".gameGrid", grid: [100,100]}); 

またボーダーの1ピクセルを考慮することが.elementの寸法を変更します。

.cell { 
    border-right: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    float: left; 
    width: 99px; 
    height: 99px; 
} 

範囲が.gameGridの範囲外の場合にドロップを無視するには、event.positionプロパティを使用して、handleElementDropメソッドでロジックをさらに書き込むことができます。