jQuery可拖放问题答案

【问题标题】：jQuery draggable and droppable issuejQuery可拖放问题
【发布时间】：2011-05-16 13:35:45
【问题描述】：

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

首先：我有两个 div。一个是<div id="selected">，另一个是<div id="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>s 从“容器”到“选定”的 div。如果有人试图添加第 11 个<li>，那么它一定不允许用户添加它。即第 11 个<li> 必须使用 jQuery 可拖动选项 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>s。所以在这种情况下，稍后用户应该能够将另一个<li> 从“容器” div 添加到“选定” div 中。但不幸的是，它不起作用。由于if (total >= 10 ) 条件，我尝试拖放到“选定”中的所有<li>s 都将被还原。

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

【问题讨论】：

标签： javascript jquery jquery-ui jquery-plugins jquery-selectors

【解决方案1】：

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

使用 sortables 不是很困难，有一个接收事件。观察这个事件，统计一下#selected里面的li，如果超过了可以取消当前排序。

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

【讨论】：

我有一个问题。当我尝试在 selected 中添加第 11 个 li 元素时，它会为第 11 个 li 腾出空间，然后在它发送回容器 div 之后。所以它似乎允许添加第 11 里。那么我们应该在这里做什么。使用 revert，它不允许空间添加第 11 个 li 元素。但不知何故，从选定的添加到容器 div 后，它变得很奇怪。
您有不同的选择。例如，如果它包含 10 个 li 元素，您可以将一个类添加到 #selected。你可以使用这个类来避免占位符占用空间（你看到的空间类是ui-sortable-placeholder ）。当然，如果发现不到 10 li，则必须删除该类。

【解决方案2】：

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

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

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

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

还有 - 您是否尝试过 Firebug 来检查您在将它们拖出后是否真的在选定的 DIV 中没有这些 LI？

【讨论】：