jquery - 战舰游戏的可拖放/可拖放

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/