jQuery：如何启用droppble再次

我希望它可以拖动（draggables）几个HTML元素到其他几个HTML元素。（droppables）jQuery：如何启用droppble再次

我发现jQuery UI可拖/放。

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

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

定义它们为可拖动：

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

我可放开申报单：

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

}

This works。现在我无法将更多的元素放入这个div中。问题是，如何/何时再次启用div？显然，如果连续的可拖动被删除。所以我试图启用funcOut里面的div：

funcOut= function(event, ui) { 

    strIdValue = event.target.id; 

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

}

但是这不起作用。似乎我也无法在funcOut中使用$（this）选择器。

有没有人有提示？

问候

我使用jQuery 2.1和UI 1.10.4

来源

2014-03-04 user3180943

嗨，你肯定'$（ '＃' + strIdValue）'是选择正确的元素？尝试'console.log（$（'＃'+ strIdValue）.size（））; ' –

嗨，是的，我确定。我在这里留下了调试代码。在拖动至少被移动一次后，似乎out函数不会被再次调用。该div只是不会再被启用:( – user3180943

你可以扔在一个JSFiddle？ –

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

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

如果一个投掷的元素上放置一个可拖动的元素，则触发丢弃事件和做到这一点：

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

所以可放开未禁用，但只有接受通过其唯一的HTML ID收到可拖动。因为它没有被禁用，out事件现在将被触发。这是我在做什么：

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

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

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

来源

2014-03-06 08:38:36 user3180943

（可能的复制/相关：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'); 
     } 

    });

由于对方回答说，关键是使我们可放开格接受“UI .draggable”，是UI是CURR项目现在被拖到我们可投资的股利。

希望有帮助！

（编辑：语法）

来源

2014-03-06 09:53:02

jQuery：如何启用droppble再次

回答

相关问题