Javascript jQuery：如何再次启用可拖放

我希望能够将几个HTML元素拖拽到其他几个HTML元素中。（可拖放）

我发现jQueryUI是可拖放的

目前，我将ul中的所有li元素定义为可拖动。我还有三个div，它们接受所有可拖动的li元素

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

我的可放下潜水器：

<div class="droppable" id="div1"></div>
<div class="droppable" id="div2"></div>
<div class="droppable" id="div3"></div>

现在我只希望一个li元素可以同时放入一个div中。我试图通过禁用div元素中的可拖放性来实现这一点，我丢弃了可拖放元素，如下所示：

funcDrop = function(event, ui) { 

  $(this).droppable('disable');

}

这很有效。现在我无法将任何进一步的li元素放入该div。问题是，如何/何时再次启用该div？很明显，如果拆下了连续牵引装置。因此，我尝试从内到外启用div：

funcOut= function(event, ui) { 

  strIdValue = event.target.id;

  $('#' + strIdValue).droppable('enable');

}

但这是行不通的。 似乎我也无法在funcOut内使用$（此）选择器

有人有什么提示吗

致意

---

我使用jQuery 2.1和UI 1.10.4，找到了一个替代解决方案：

似乎如果某个元素一旦被禁用，out事件就不会触发，因此我无法使用该元素本身再次启用它。我所做的是：

如果将可拖放元素拖放到可拖放元素上，则会触发拖放事件并执行以下操作：

$(this).droppable({ accept: ('#' + $(ui.draggable).attr('id')) });

因此，Dropable未被禁用，但仅接受通过其唯一HTML id接收到的Dragable。因为它未被禁用，out事件现在将被触发。这就是我在其中所做的：

$(this).droppable({ accept: 'li' });

现在，dropable一如既往地接受所有HTML li元素。现在每个Dropable只接受一个Dragable。如果可拖放设备接收到可拖动设备，则可拖放设备现在处于“锁定”状态

我想知道这是一个有效的解决方案还是一个肮脏的黑客行为。

（可能重复/相关：）

基于您共享的JSFIDLE（目前没有按照您的要求执行），下面是一个修改版本的Dropable函数，您可以使用它来实现所需的结果：

    $(".droppable").droppable({
        accept: "li",
        drop: function(event, ui) { 
            $(this).droppable('option', 'accept', ui.draggable);
        },
        out: function(event, ui){
            $(this).droppable('option', 'accept', 'li');
        }   

    });

正如另一个答案所述，诀窍是让我们的可拖放div接受“ui.draggable”，即ui当前被拖到可拖放div的项

希望有帮助

---

（编辑：Grammar）

Hi，您确定“$”（“#”+strIdValue）”正在选择正确的元素吗？试试`console.log（$（'#'+strIdValue.size（））`嗨，是的，我确定。我把调试代码留在这里了。在拖动表至少移动一次后，似乎不会再次调用out函数。无法再次启用div：（你能加入一个JSFIDLE吗？我能得到的最接近的结果是：如果你把一个li元素拖到一个div中，它就会被放置。现在你不能再把另一个li元素添加到div中。我不知道为什么li会卡在diff中，这与我浏览器中的版本不同，即使代码是相同的。无论如何，即使你可以拖动一个卡住的元素，我的问题是，即使li元素完全离开了div，div也不会变成可拖放的。嗨，我设法创建了一个工作的JSFIDLE：你可以将foo拖到1中。现在你不能将bar拖到1中。如果你现在将foo拖到2中，你就不能再将bar和foo拖到1中。1将不会被启用。

$(this).droppable({ accept: 'li' });

    $(".droppable").droppable({
        accept: "li",
        drop: function(event, ui) { 
            $(this).droppable('option', 'accept', ui.draggable);
        },
        out: function(event, ui){
            $(this).droppable('option', 'accept', 'li');
        }   

    });