用于战舰游戏的可拖动/可拖动 [英] Draggable/Droppable for Battleship game

问题描述

我一直在尝试jQuery UI的可拖放交互，以允许用户为战舰游戏设置战舰.据我所知，当放置位置的大小合适以适合可拖动的物品时，可放置的交互就可以很好地工作，但是在《战舰》游戏中，您有几艘不同长度的飞船，可以容纳2-5个正方形.

I've been experimenting with the jQuery UI draggable/droppable interaction to allow a user to set ships for a game of Battleship. As far as I can tell, droppable interactions work just fine when the drop location is appropriately sized to fit a draggable item, but in the Battleship game, you have ships of several different lengths that fit into a number of squares ranging 2-5.

如果您检出此jsFiddle( http://jsfiddle.net/cDqGN/)，并弄乱了绕着长度为2的飞船(相对于单个方块)，您会发现拧下水滴相当容易，因为飞船会卡在正方形之间，或者将正方形拖到您打算放下它的位置的右​​侧.

If you check out this jsFiddle (http://jsfiddle.net/cDqGN/), and mess around with the ship of length two (versus the single block), you'll see it's fairly easy to screw up the drop, with the ship getting stuck between squares, or getting dragged a square to the right of where you intended to drop it.

有人知道这种互动有什么技巧可以使它变得更好吗?

Does anyone know of any tricks with this interaction to get it to go better?

特别是，这就是我现在所拥有的互动方式:

In particular, this is the interaction as I have it now:

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

推荐答案

我找到了使用grid选项的解决方案；我将以下行添加到您的handleDrop函数中:

I found a solution using the grid option; I added the line below into your handleDrop function:

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

(这是52x52，因为正方形是50x50，每边的线宽加1).将船拖到板上之后，您就可以更精确地放置船了.

(It's 52x52 because the squares are 50x50, plus 1 on each side for the line width). After the ship is dragged to the board, you can then place the ship more precisely.

这是更新jsFiddle: http://jsfiddle.net/cDqGN/1/

Here is the update jsFiddle: http://jsfiddle.net/cDqGN/1/

这篇关于用于战舰游戏的可拖动/可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！