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

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

我是这样做的方法是使用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;

 
Drop here
 
Drag me
 
Drag me 

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

有人可以帮忙吗？

Answer 1

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

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

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

要么：

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

要么工作。

Answer 2

这可以通过为draggables和droppable area定义scope来实现：

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

示例链接 。