Draggables Jquery UI，禁用可放置的单个 div

Question

我正在尝试制作一些教育网站，我想让学生做的一件事是将项目拖到一个区域，然后才能进入下一阶段。

我认为执行此操作的方法是使用 jquery droppables 脚本，并在将项目拖放到可放置 div 中时禁用可拖动选项。然后我将向变量添加 1，当它达到正确的数字时，将启用前进按钮。

问题是我无法弄清楚如何使可放置功能仅适用于每个特定的可拖动对象。所以我所拥有的是：

$(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 不是很好（正在学习），我不知道如何让它只禁用我放入可放置区域的 JavaScript。

有人可以帮忙吗？

Answer 1

您只是将正确的代码放在错误的位置。

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

上面的代码将独立工作，并关闭 #draggable 的可拖动功能，无需将其放在放置函数中。

或者：

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

两者都可以。

Answer 2

这可以通过定义可拖动和可放置区域的范围来实现：

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

示例链接。