jQuery draggable revert基于条件

我有一个与jQuery draggable和droppable相关的问题。 这是描述我想要做的事情。

第一：我有两个div。 一个是

，另一个是

。 “container”有10个

，可以拖动并可以放入“选中”。 这是代码：

 
 
 
 
 
 
 
1
 
2
 
....
 
9
 
10
 
  

第二：我想允许从“容器”到“选定”div的任何5

s。 如果有人试图添加第6个

，那么它一定不允许用户使用它。 那个将要插入“selected”的第6个

必须使用jQuery draggable选项revert来恢复 。

ie $("#container li").draggable({ revert: true }); 这是javascript代码。

 $(document).ready(function(){ var total = 0; $("#selected").droppable({ drop: function() { total = $("#selected li").length; //alert(total); if (total >= 5) { $("#container li").draggable({ revert: true }); } else { // below code is not working $("#container li").draggable({ revert: false }); // this is making whole feature weird. I can drag all the 
 anywhere } } }); }); 

这工作正常。

第三：但是当我将

从“selected”拖到“container”时，“selected”div只有4个

s。 所以在这种情况下，以后用户应该能够从“容器”div中将另一个

添加到“selected”div中。 但不幸的是它没有用。 由于if (total >= 5 )条件，我尝试拖放到“已选择”的所有

s都被恢复。

任何人都可以帮助我使用可拖动的还原选项来解决这个问题吗？ 请…

Answer 1

您可以使用accept选项 ，它可以更轻松地执行此操作，如下所示：

 $("#selected ul").droppable({ accept: function() { return $("#selected li").length < 5; } }); 

你可以在这里测试一下 。 当你拖出元素时， .length会下降，它会再次接受元素......没有理由让任何更复杂的:)

Answer 2

首先，将revert设置为false将完全禁用恢复function。 正如您所指出的那样，您可以将拖动器放在任何地方。 你通常想要的是revert: 'invalid' ，这意味着它会在任何不属于接受它的可放置的东西上掉落时恢复。

你想做什么应该是这样的：

 $('#selected').droppable({ drop: function() { // since you're doing a full re-calc every time, this doesn't need to be global var total = $("#selected li").length; if(total >= 5) { // once you've reached five, simply don't accept any more elements // the rest will revert if dropped here $('#selected').droppable('disable'); } } });