javascript - 基于条件的 jQuery 可拖动还原

Question

我遇到了一个与 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>从“容器”到“选定”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>从“selected”到“container”，“selected”div 将只有 4 <li>秒。所以在这种情况下，稍后用户应该能够添加另一个 <li>从“容器”分区进入“选定”分区。但不幸的是它不起作用。所有 <li>由于 if (total >= 5 )，我尝试拖放到“已选择”中被还原条件。

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

Answer 1

您可以使用 accept option它需要一个函数来更容易地做到这一点，就像这样:

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

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