jQuery draggable revert基于条件

Question

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

第一:我有两个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>

第二:我想允许<li>从"容器"到"选定"div的任何5 秒.如果有人试图添加第6个<li>,那么它一定不允许用户使用它.那个<li>将被插入"selected" 的第6个必须使用jQuery draggable选项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>秒.所以在这种情况下,以后用户应该能够<li>从"容器"div 中将另一个添加到"selected"div中.但不幸的是它没有用.<li>由于if (total >= 5 )条件原因,我试图拖放到"已选中"的所有s都将被恢复.

任何人都可以帮助我使用draggable revert选项解决这个问题吗？请...

Answer 1

您可以使用带有函数的accept选项来更轻松地执行此操作,如下所示:

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

你可以在这里测试一下.当你拖出元素时,.length它会下降并且它会再次接受元素......没有理由变得更复杂:)