Question

我一直在尝试使用jQuery UI draggable / droppable交互，以允许用户为Battleship游戏设置船只。据我所知，当放置位置大小适合可拖动物品时，可放置的交互工作正常，但在战舰游戏中，你有几种不同长度的船只，适合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/

Dragragable / Droppable for Battleship游戏

1 个答案: