Draggables jQuery UI，在droppable上禁用单个div [英] Draggables Jquery UI, disable individual div on droppable

问题描述

我正在尝试制作一些教育网站，而我想让学生做的一件事是将物品拖到某个区域，然后再进入下一阶段.

I'm trying to make some educational site and one of the things I want to have the students do is drag items to an area before being able to proceed to the next stage.

我想做到这一点的方法是使用jquery droppables脚本，并在将其拖放到droppable div中时禁用项目draggable选项.然后，我要向变量中添加1，当变量达到正确的数字时，将启用前进按钮.

I was thing the way to do this was use the jquery droppables script and have the items draggable option disable when it is dropped in the droppable div. Then I was going to add 1 to a variable, when it gets to the right number the button to advance would be enabled.

问题是我无法弄清楚如何使可放置函数仅对每个特定的可拖动对象起作用.所以我有:

The problem is that I can't figure out how to make the droppable function work only for each particular draggable. So what I have is:

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

But of course, all this does is disable the the first draggable whenever any are dragged into the droppable div. My javascript is not very good (im learning) and I don't know how I would make it only disable the one that I put into the droppable area.

任何人都可以帮忙吗?

推荐答案

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

You're just putting the right code in the wrong place.

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

上面的代码可以单独使用，并关闭"#draggable"的可拖动功能，无需将其放在放置功能中.

The above will work on it's own and turn off draggable for #draggable, no need to put it in the drop function.

OR:

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

任何一种都可以.

这篇关于Draggables jQuery UI，在droppable上禁用单个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！