Draggable/Droppable for Battleship遊戲

我一直在嘗試使用jQuery UI可拖拽/可拖拽交互來允許用戶設置一艘戰艦遊戲。據我所知，當放置位置的大小適合可拖動的項目時，可放下的交互工作正常，但在戰艦遊戲中，您有幾種不同長度的船隻，適合2-5個不等的正方形。Draggable/Droppable for Battleship遊戲

如果你看看這個jsFiddle（http://jsfiddle.net/cDqGN/），並且弄亂了長度爲2的船（相對於單塊），你會發現它很容易把水珠弄垮，隨着船在方塊之間卡住，或者將方塊拖到您想放置它的位置的右側。

有沒有人知道這個互動的任何技巧，讓它變得更好？

特別地，這是相互作用，因爲我有它現在：

function handleDrop(event, ui) { 
    ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); 
    ui.draggable.draggable('option', 'revert', false); 
}

來源

2013-08-06 Brett Shollenberger

注：重現卡住之間平方誤差，將2-船舶直接向上或向下，不轉移其x座標;以這種方式，它會卡在正方形之間。 1船沒有這個錯誤。 –

我發現使用grid選項的溶液;我加了線以下到您的handleDrop功能：

ui.draggable.draggable("option", "grid", [ 52, 52 ]);

（這是52x52因爲廣場爲50x50，加上前後各1個用於線路寬度）。將船拖到船上後，可以更精確地放置船。

這裏是更新的jsfiddle：http://jsfiddle.net/cDqGN/1/

來源

2013-08-06 19:47:19

這在Safari和Firefox中看起來很漂亮，但無論出於什麼原因，Chrome都會出現錯位 - 它不會讓您進入最左邊的塊，並讓您將該塊放在板的右側。我會進一步調查。 –

嗯，這很奇怪，它適用於我在Chrome中（至少通過jsFiddle）;也許它取決於jQuery UI版本？ –

是的，這種交互與jQuery 1.9.1和jQuery UI 1.9.2非常相稱。 –

Draggable/Droppable for Battleship遊戲

回答

相關問題