基于条件的jQuery可拖动还原答案

【问题标题】：jQuery draggable revert based on condition基于条件的jQuery可拖动还原
【发布时间】：2010-11-29 10:34:36
【问题描述】：

我遇到了一个与 jQuery 可拖放相关的问题。这是描述我想做的事情。

首先：我有两个 div。一个是<div id="selected">，另一个是<div id="container">。 “容器”有 10 个<li>，它们可以拖放到“选定”中。这是代码：

<div id="selected">
    <ul class="sortable-list">
    </ul>
</div>


<div id="container">
    <ul class="sortable-list">
             <li>1</li>
             <li>2</li>
             <li>....</li>
             <li>9</li>
             <li>10</li>
    </ul>
</div>

第二：我想允许任何 5 个<li>s 从“容器”到“选定”的 div。如果有人试图添加第 6 个<li>，那么它一定不允许用户添加它。即第 6 个<li> 必须使用jQuery draggable option revert 恢复，将被插入到“选定”中。

即$("#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 <li> anywhere
                }
            }
    });
});

这工作正常。

第三：但是当我将<li>从“选定”拖到“容器”时，“选定”div将只有4个<li>s。所以在这种情况下，稍后用户应该能够将另一个<li> 从“容器” div 添加到“选定” div 中。但不幸的是，它不起作用。由于if (total >= 5 ) 条件，我尝试拖放到“选定”中的所有<li>s 都将被还原。

谁能帮助我使用draggable revert 选项解决这个问题？请...

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins

【解决方案1】：

您可以使用accept option，它需要一个函数来更轻松地完成此操作，如下所示：

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

You can test it out here。当您将元素拖出时，.length 会下降，它会再次接受元素...没有理由变得更复杂:)

【讨论】：

@Nick Craver：是的，它正在工作。这里的新问题是我可以看到我正在将 LI 元素从“容器”拖到“选定”。但是在将 LI 从选定对象拖动到容器时，似乎该元素没有被拖动。但最后，我可以看到 LI 从选中状态移动到容器中。有什么办法可以在从选中拖到容器的时候看到拖拽效果吗？
@lakum4stackof - 你应该得到效果了，你还在添加/删除可拖动的任何地方吗？
@Nick Craver - 从选定的 div 拖回容器 div 时，我看不到拖动效果。但最终，我将 LI 从选定的 div 移动到容器 div，并且每次都将 LI 添加到 LI 列表的末尾。
@lakum4stackof - 哦，我明白你的意思了，给你：jsfiddle.net/nick_craver/HemSU/1
@Nick Craver - 嘿亲爱的，每当我将 LI 从容器拖放到选定或选定容器时，它总是将 LI 放在整个 LI 列表的末尾。我不能把它放在两个 LI 元素之间。有什么解决办法吗？

【解决方案2】：

首先，将revert 设置为false，将完全禁用revert 功能。正如您所指出的，您可以将可拖动对象拖放到任何地方。你通常想要的是revert: 'invalid'，这意味着只要它被放在任何不是接受它的droppable的东西上，它就会恢复。

你想做的应该是这样的：

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

【讨论】：