Jquery ui 使jQuery UI可拖放一次只接受一个可拖放

我只见过几个关于这个问题的变体，在其他几个地方问过，特别是和

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

这里有一个到目前为止我得到的链接：，下面是最相关的代码

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');
        }

有什么建议吗

提前谢谢！

---

Jeremy

在第一次拖放事件后，您似乎成功禁用了磁贴上的可拖放功能。您的问题是，在初始占用的磁贴集上，您最初没有将Dropable设置为disabled

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

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

请注意，这与在初始选项中更改可拖放性的语法不同。从：

编辑

看来我对

$（this.droppable（'disable'）的看法是错误的

和

$（this）.droppable（'enable'）

jqueryui是否具有用于启用和禁用的别名函数

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

---

谢谢你的回答，@pabo。您的代码确实将棋盘磁贴初始化为“禁用”，但可拖放（我的函数名为“handleOut”）的“退出”事件仍然不会在任何磁贴已经包含游戏件后重新激活它们。@MintToothick:

$（此）。可拖放（“禁用”）

和

$（this）.droppable（'enable'）不工作。使用我上面回答的“setter”语法：
$（“.selector”）.droppable（“option”，“disabled”，true）我能够使用原始的
$（this.droppable（'disable'）获得我的代码函数方法（在我看到你最后的评论之前）。。。我的问题是，我需要将禁用/启用切换移到
下拉菜单
事件。它看起来确实像
$（this）.droppable（'disable'）在实际的
drop
事件中不起作用。为什么会这样？再次感谢你的帮助！我真的很感激。
enable: function() {
    return this._setOption( "disabled", false );
},
disable: function() {
    return this._setOption( "disabled", true );
},