jQuery 可拖放问题

Question

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

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

，另一个是

。 “container”有 30 个可拖放到“selected”中的

。下面是代码：

<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>29</li>
             <li>30</li>
    </ul>
</div>

第二： 我想允许从“container”到“selected”div 的任意 10 个

。如果有人尝试添加第 11 个

，则不得允许用户添加。这是要插入“selected”的第 11 个

必须使用 jQuery 可拖动选项恢复来恢复。

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

$(document).ready(function(){

    var total = 0;
    $("#selected").droppable({
        drop: function() {
                total = $("#selected li").length;
                //alert(total);
                if (total >= 10) {
                    $("#container li").draggable({ revert: true });
                } else {
                    //$("#container li").draggable({ revert: false });
                }
            }
    });
});

这工作正常。

第三：但是当我将

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

。因此，在这种情况下，稍后用户应该能够将另一个

添加到“container”div 中的“selected”div 中。但不幸的是它不起作用。由于 if (total >= 10 ) 条件，我尝试拖放到“选定”中的所有

都将被还原。

谁能帮我解决这个问题吗？请...

Answer 1

我建议使用可排序，因为它在某种程度上与两个 div 上的可拖动和可放置相同。

对于可排序来说并不是很困难，有一个接收事件。观察这个事件，统计#selected里面的li，如果超过允许的数量，就可以取消当前的排序。

小提琴： http://jsfiddle.net/doktormolle/K7kDz/

Answer 2

first - 我相信你应该使 UL 可删除而不是 DIV，否则你的 LI 最终会出现在 UL 之外（你可以设置 UL 的样式来填充整个 DIV，所以它仍然会触发当元素位于其上方时可删除部分）

$("#selected ul.sortable-list").droppable({
    ......
});

第二和第三 - 您将设置恢复为 false 的 ELSE 部分注释掉...是仅针对此示例还是您忘记了注释那里？ （这就是它不起作用的原因）

} else {
    // $("#container li").draggable({ revert: false });
}

还有 - 你是否尝试过 Firebug 来检查你是否真的不这样做一旦您将这些 LI 拖出，它们就在选定的 DIV 中吗？