如何將可拖動項目捕捉到有限容器

我有一個問題在javascript中創建簡單塊拼圖遊戲。我試圖將元素捕捉到網格，但我無法弄清楚如果我的元素打破聲明爲可放下的網格的限制，如何限制放下。如何將可拖動項目捕捉到有限容器

我創建了一個小提琴：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); 
}

如何與定位解決問題網格中的元素可以防止元素超出網格或者超出非網格時丟棄可能的單元格（如果我們假設我們已經在單元格中有一些被刪除的元素）？

此外，我有HandleElementDrop函數和可拖動位置的問題，它總是把元素一個單元格放在與放置單元格相關的位置。

來源

2016-10-24 freshbm

所以我做了一個DEMO有一些建議。

嘗試使用grid屬性設置爲100x100的網格而不是捕捉到一個.cell：

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

也改變了.element的尺寸需要考慮的邊框1px的：

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

如果邊界在.gameGrid之外，爲了忽略掉落，可以使用event.position屬性在handleElementDrop方法上編寫更多邏輯。

來源

2016-10-24 21:07:26

如何將可拖動項目捕捉到有限容器

回答

相關問題