Question

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

我是这样做的方法是使用jquery droppables脚本，并在droppable div中删除项目draggable选项禁用。然后我打算在变量中添加1，当它到达正确的数字时，将启用前进按钮。

问题在于我无法弄清楚如何使droppable函数仅适用于每个特定的draggable。所以我拥有的是：

$(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>

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

有人可以帮忙吗？

Answer 1

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

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

以上内容将自行运行并关闭#draggable的拖动，无需将其放入drop函数中。

OR：

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

要么工作。

Answer 2

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

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

Example Link

Draggables Jquery UI，在droppable上禁用单个div

2 个答案: