嵌套 jQuery 可排序的问题答案

【问题标题】：Problem with nested jQuery sortables嵌套 jQuery 可排序的问题
【发布时间】：2010-02-08 07:08:41
【问题描述】：

这是我页面的基本 HTML 结构：

<div id="selectedItemsTop">
    <ul>
        <li>
            Root element
            <ul>
                <li>Level One a</li>
                <li>Level One b</li>
                <li>
                    Level One parent
                    <ul>
                        <li>Level Two a</li>
                        <li>
                            Level Two parent
                            <ul>
                                <li>Level Three a</li>
                                <li>Level Three b</li>
                            </ul>
                        </li>
                        <li>Level Two b</li>
                    </ul>
                </li>
                <li>Level One c</li>
            </ul>
        </li>
    </ul>
</div>

例如：

根元素
- 一级a
- 一级 b
- 一级父级
  - 二级a
  - 二级父级
    - 三级a
    - 三级 b
  - 二级 b
- 一级 c

在根之后的每个缩进级别可以有任意数量的项目，但只会有 3 个级别，并且每个级别只有一个父级（即：在根下总是有 3 个 <ul>s，但是<li>s 的数量是可变的）。

我允许用户使用 jQuery UI Sortable 插件重新排序这个结构。要添加新项目，在页面上与此树相邻的三组项目（一级项目、二级项目、三级项目）。用户可以从那里拖动到列表中来添加它 - 但它必须在相应的级别添加。

我已经在使用 draggable 和 connectToSortable 选项：

$('ul.availableItems').each(function(i) {
    var selector = "#selectedItemsTop > ul";
    for (var j = 0; j <= i; ++j) { // count from 0 to [0, 1, 2]
        selector += " > li > ul";
    }
    // eg: selector == "#selectedItemsTop > ul > li > ul"
    // eg: selector == "#selectedItemsTop > ul > li > ul > li > ul"
    // eg: selector == "#selectedItemsTop > ul > li > ul > li > ul > li > ul"
    $(this)
        .find('li')
        .draggable({
            connectToSortable : selector
        })
    ;
});
$('#selectedFieldsTop > ul > li ul').sortable();

正如我所说，这适用于...除了 IE 之外的所有应用程序。一级项目完美运行，但不会将 2 级或 3 级项目添加到可排序中。尝试对已经存在的 2 级或 3 级项目之一进行排序，使其拾取整个“一级父级”li 并移动整个事物。

你能想到什么可以让这个在 Firefox 而不是 IE 中工作吗？你能想出一种不同的方法来处理这个问题吗？

_{版本：Firefox 3.6、IE7、jQuery 1.3.2、jQuery UI 1.7.2}

更新：
这是 JSBin 上的工作代码：http://jsbin.com/ixabo/edit -- 不出所料，它在 IE 中不起作用，但我认为这是 JSBin 的问题（“_console 未定义”）。要查看它的一半工作，也许复制/粘贴到本地文件并在 IE 中打开它。

【问题讨论】：

是否可以在jsbin.com上做一个工作示例？
明天当我回到办公室时，我会把它拿到那里......（只要你看着，它会正常工作）
@Natrium - 立即查看链接。

标签： jquery internet-explorer jquery-ui

【解决方案1】：

您可以使用其他插件吗？ jsTree这种事情做得很好。

【讨论】：

【解决方案2】：

之前的 sortable 也有问题：我的案例是 Accordion 和 sortables。我无法得到明确的答案，但如果您查看其中的任何树实现，它们都直接使用拖放且不可排序。

基于这个经验——我知道的不是很准确——我同意 akiller 的观点并说：使用一个好的树插件，而不是尝试用 sortable 自己做这件事。 jsTree 非常好，应该可以胜任 - 如果由于某种原因 jsTree 不适合您的需求，还有其他的。

【讨论】：