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>

例如：

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

每个缩进级别可以有超过根目录的任意数量的项目，但每个级别只有3个级别，每个级别只有一个父级（即：根目录下总共只有3个<ul>，但<li>的数量是可变的。）

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

我已将此工作用于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级项目中的一个进行排序，这使得它可以选择整个“一级父级”并移动整个项目。

有什么你能想到的东西可以让它在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很好地完成了这件事。

Answer 2

之前也有可排序的问题：我的案例是Accordion和sortables。我无法得到一个明确的答案，但如果你看看任何一个树实现，他们直接使用拖放而不是可排序。

基于这种经验 - 我不知道 - 我会同意akiller并说：采取一个好的树插件，而不是尝试自己做可分类。 jsTree相当不错，应该做好工作 - 如果由于某些原因jsTree不适合你的需要，还有其他人。

嵌套jQuery sortables的问题

2 个答案: