jQuery：如何再次启用 droppable答案

【问题标题】：jQuery: how to enable droppable againjQuery：如何再次启用 droppable
【发布时间】：2014-03-04 15:31:14
【问题描述】：

我希望可以将几个 HTML 元素拖动（可拖动）到几个其他 HTML 元素中。（可滴）

我发现 jQuery UI 是可拖放的。

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

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

将它们定义为可拖动的：

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

我的可放置 div：

<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 元素内的可放置性来做到这一点，我删除了可拖动对象，如下所示：

funcDrop = function(event, ui) { 

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

}

这行得通。现在我无法将任何其他 li 元素放入此 div 中。问题是，如何/何时再次启用 div？显然，如果 contianing draggable 被删除。所以我尝试启用 funcOut 中的 div：

funcOut= function(event, ui) { 

  strIdValue = event.target.id;

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

}

但这不起作用。看来我也不能在 funcOut 中使用 $(this) 选择器。

有人有提示吗？

最好的问候

我使用 jQuery 2.1 和 UI 1.10.4

【问题讨论】：

嗨，你确定 `$('#' + strIdValue) ` 选择了正确的元素吗？尝试`console.log($('#' + strIdValue).size()); `
嗨，是的，我确定。我把调试代码留在这里。在可拖动对象至少移动一次后，似乎不再调用 out 函数。 div 不再启用 :(
你能扔一个 JSFiddle 吗？
我能得到的最接近的：jsfiddle.net/qN8s9 如果你将一个 li 元素拖到一个 div 中，它将被放置。现在您不能向 div 添加另一个 li 元素。我不知道为什么 li 会卡在 diff 中，这与我浏览器中的版本不同，即使代码相同。无论如何，即使你可以拖动一个卡住的元素，我的问题是，即使 li 元素完全离开了 div，div 也不会变得可放置。
嗨，我设法创建了一个有效的 JSFiddle：jsfiddle.net/qN8s9/1 您可以将 foo 拖入 1。现在您无法将 bar 拖入 1。如果您现在将 foo 拖入 2，则可以t 将 bar 和 foo 拖入 1 了。 1 不会启用。

标签： javascript jquery drag-and-drop draggable

【解决方案1】：

我想出了一个替代解决方案：

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

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

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

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

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

现在 droppable 像以前一样接受所有 HTML li 元素。现在每个droppable 只接受一个draggable。如果 droppable 接收到一个可拖动对象，则它现在被“锁定”。

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

【讨论】：

【解决方案2】：

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

根据您共享的 JSFiddle（目前没有按照您的要求执行），这里是可放置函数的修改版本，您可以使用它来实现所需的结果：

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

希望对您有所帮助！

（编辑：语法）

【讨论】：