Question

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

首先：我有两个div。一个是<div id="selected">，另一个是<div id="container">。 “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>从“选定”拖到“容器”时，“已选择”的div只有4 <li>秒。所以在这种情况下，以后用户应该能够从“容器”div中将另一个<li>添加到“selected”div中。但不幸的是它没有用。由于<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会关闭，它会再次接受元素......没有理由让它变得更复杂：）

Answer 2

首先，将revert设置为false，将完全禁用恢复功能。正如你所指出的那样，你可以将拖动器放在任何地方。你通常想要的是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');
       }
    }
});

jQuery draggable revert基于条件

2 个答案: