jquery - 嵌套 jQuery 可排序问题

Question

这是我的页面的基本 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> ，但<li> 的数量是可变的)。

我允许用户使用 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 级项目之一进行排序会使其拾取整个“一级父级”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 中打开它。

Answer 1

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