使 jQuery UI 可放置一次只接受一个可拖动的

Question

我只在其他几个地方看到过这个问题的几个变体，特别是 here 和 here。

基本上，我有一个跳棋棋盘，棋盘上的每个方块都是可放置的，每个棋子都是可拖动的。每个方块一次只能有一块，我正在尝试根据方块上是否有一块来切换启用/禁用方法。

这是我目前所获得的链接：http://jsbin.com/ayalaz，下面是最相关的代码。

function handleDrop(e, ui) {
            var tileNumber = $(this).data('tile');
            // Make the gamepiece snap into the tile
            ui.draggable
                .data({ // WHAT IF PIECE IS SET BACK DOWN IN SAME TILE... CHECK FOR IT!
                    'preRow': ui.draggable.data('curRow'),
                    'preCol': ui.draggable.data('curCol'),
                    'curRow': $(this).data('row'),
                    'curCol': $(this).data('col')
                });
            $(this).append($(ui.draggable));
            ui.draggable
                .position({
                    of: $(this),
                    my: 'left top',
                    at: 'left top'
                });
            $(this).droppable('disable');
            //console.log("Gamepiece set down at: (" + $(this).data('row') + "," + $(this).data('col')+ ")");
        }

function handleOut(e, ui) {
            // HOW TO TOGGLE DROPPABLE??
            $(this).droppable('enable');
        }

有什么建议吗？

提前致谢！ 杰里米

Answer 1

看起来您在第一次放置事件后成功禁用了磁贴上的放置。您的问题是您最初没有在初始占用的磁贴集上将 droppable 设置为禁用。

在您创建游戏板和棋子之后，假设我的 CSS 选择器准确地反映了您的结构，这应该可以完成：

$('div.gamePiece').parent().droppable("option", "disabled", true);

请注意，这与更改初始选项中可放置性的语法不同。来自jQuery UI droppable documentation：

//initialize
$( ".selector" ).droppable({ disabled: true });

//setter
$( ".selector" ).droppable( "option", "disabled", true );

编辑

看来我对$(this).droppable('disable'); 和$(this).droppable('enable'); jquery-ui 的看法是错误的确实 具有启用和禁用的别名功能。

enable: function() {
    return this._setOption( "disabled", false );
},
disable: function() {
    return this._setOption( "disabled", true );
},