jQuery:如何再次启用droppable

Question

我希望它可以拖拽(拖拽)几个HTML元素到其他几个HTML元素。(可丢弃的)

我发现jQuery UI是可拖/可放的。

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

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

将它们定义为可拖动：

$('li').draggable({ revert: 'invalid' });

我的droppable：

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

使div可丢弃：

$('div.droppable').droppable({ accept: 'li', drop: funcDrop, out: funcOut });

我现在希望一次只能将一个li元素放到div中。我试图通过禁用div元素中的droppability来做到这一点，我删除了draggable，如下所示：

funcDrop = function(event, ui) { 

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

}

这是可行的。现在我不能再把li元素放到这个div中了。问题是，如何/何时再次启用div？很明显，如果连续拖拽被移除。因此，我尝试在funcOut中启用div：

funcOut= function(event, ui) { 

  strIdValue = event.target.id;

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

}

但这是行不通的。似乎我也不能在funcOut中使用$(this)选择器。

有谁能给点提示吗？

诚挚的问候

我使用jQuery 2.1和UI 1.10.4

Answer 1

我想出了另一个解决方案：

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

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

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

因此，droppable不会被禁用，而是只接受通过其唯一的HTML id接收到的draggable。因为它没有被禁用，所以out事件现在将被触发。这就是我在其中所做的：

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

现在，droppable一如既往地接受所有HTML li元素。现在每个droppable只接受一个draggable。droppable现在被“锁定”，如果它接收到一个draggable。

我想知道这是否是一个有效的解决方案，或者只是一个肮脏的黑客。

Answer 2

(可能重复/相关：jQuery UI - Droppable only accept one draggable)

基于你已经分享的JSFiddle (它目前没有做你要求的事情)，这里是droppable函数的一个修改版本，你可以使用它来达到期望的结果：

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

    });

正如另一个答案所说，诀窍是让我们的droppable div接受'ui.draggable'，是ui当前被拖到我们的droppable div中的项目。

希望这能有所帮助！

(编辑:语法)