可拖/可掉落的战舰游戏

Question

我一直在试验jQuery UI可拖动/可下垂的交互，以允许用户为战舰游戏设置船只。据我所知，当掉落位置适当大小以适合一个拖放物品时，可下垂的交互作用很好，但是在战舰游戏中，你有几艘不同长度的飞船，它们可以装进2-5个方格中。

如果您查看了这个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 );
}

Answer 1

我找到了一个使用grid选项的解决方案；我将下面的行添加到handleDrop函数中：

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

(它是52x52，因为正方形是50x50，加上线宽两边各1)。当船被拖到甲板上后，你就可以更精确地放置船了。

以下是更新的jsFiddle：http://jsfiddle.net/cDqGN/1/