Question

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

我发现jQuery UI可拖动/可放置。

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

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

将它们定义为可拖动：

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

我的droppable divs：

<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？显然，如果删除了contianing draggable。所以我尝试在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事件不会触发，因此我无法使用元素本身再次启用它。所以我做了，是这样的：

如果在droppable元素上放置一个可拖动元素，则会触发drop事件并执行此操作：

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

因此，droppable未被禁用，但仅接受其唯一HTML id所接收的draggable。由于未禁用，因此现在将触发out事件。这就是我在其中所做的：

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

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

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

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');
        }   

    });

正如另一个答案所述，诀窍是使我们的可投放div接受' ui .draggable'， ui 项目目前被拖到我们的可放弃的div。

希望有所帮助！

（编辑：语法）

jQuery：如何再次启用droppable

2 个答案: