Question

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

首先：我有两个div。一个是<div id="selected">，另一个是<div id="container">。 “container”有30 <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>29</li>
             <li>30</li>
    </ul>
</div>

第二：我想允许任何10个<li>从“容器”到“选定”div。如果有人试图添加第11个<li>，那么它一定不允许用户使用它。那个将被插入“selected”的第11个<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 >= 10) {
                    $("#container li").draggable({ revert: true });
                } else {
                    //$("#container li").draggable({ revert: false });
                }
            }
    });
});

这很好。

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

任何人都可以帮我解决这个问题吗？请...

Answer 1

我建议使用sortables，因为它在某种程度上与两个div上的draggables和droppables相同。

对于sortables并不是很困难，有一个接收事件。观察此事件并计算#selected内的li，如果超过允许范围，则可以取消当前的排序。

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

Answer 2

首先 - 我相信你应该制作UL droppable而不是DIV，否则你的LI将最终在UL之外（你可以设计UL来填充整个DIV，所以它会当一个元素位于其上方时仍会触发可放置的部分）

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

第二和第三 - 你有ELSE部分，你设置revert为false注释掉...就是这个例子还是你忘了那里的评论？（这将是它不起作用的原因）

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

同样 - 你有没有尝试Firebug来检查你拖动它们后所选DIV中是否真的没有这些LI？

jQuery draggable和droppable问题

2 个答案: