3

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

我这样做的方法是使用 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 不是很好（我正在学习），我不知道如何让它只禁用我放入可放置区域的那个。

有人可以帮忙吗？

4

2 回答 2

4

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

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

以上将自行工作并为#draggable关闭draggable，无需将其放入drop功能中。

或者：

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

要么会工作。

于 2011-11-15T22:11:27.173 回答
0

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

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

示例链接。

于 2010-12-30T19:00:07.973 回答