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游戏

回答

相关问题