Draggables Jquery UI，禁用droppable上的单个div答案

【问题标题】：Draggables Jquery UI, disable individual div on droppableDraggables Jquery UI，禁用droppable上的单个div
【发布时间】：2010-12-30 17:40:37
【问题描述】：

我正在尝试制作一些教育网站，我希望学生们做的一件事是在进入下一阶段之前将项目拖到一个区域。

我这样做的方法是使用 jquery droppables 脚本并在将项目可拖动选项放在可放置 div 中时禁用它。然后我打算给一个变量加 1，当它达到正确的数字时，将启用前进按钮。

问题是我不知道如何让 droppable 函数只对每个特定的可拖动对象起作用。所以我所拥有的是：

$(document).ready(function() {
    $("#draggable").draggable();
    $("#draggable2").draggable();
    $("#droppable").droppable({
      drop: function() { $( "#draggable" ).draggable( "option", "disabled", true );; }
    });
  });

使用这些 div；

<div id="droppable">Drop here</div>
<div id="draggable" class="drag">Drag me</div>
<div id="draggable2" class="drag">Drag me</div>

但是，当然，所有这些都是禁用第一个可拖动的，只要有任何被拖动到可放置的 div 中。我的 javascript 不是很好（我正在学习），我不知道如何让它只禁用我放入可放置区域的那个。

有人可以帮忙吗？

【问题讨论】：

标签： jquery draggable droppable

【解决方案1】：

你只是把正确的代码放在了错误的地方。

$( "#draggable" ).draggable( "option", "disabled", true )

以上将自行工作，并为#draggable关闭可拖动，无需将其放在放置功能中。

或者：

$("#droppable").droppable({
  disabled: true
});

两者都行。

【讨论】：

【解决方案2】：

这可以通过将scope 定义为可拖动区域和可放置区域来实现：

$(function() {
    $('.drag').draggable({
        revert: "invalid",
        scope: "items"
    });
    $('#droppable').droppable({
        scope: "items"
    });
});

Example Link.

【讨论】：