JQuery UI 嵌套排序：所有嵌套列表/项目都算作根项目之外的一项答案

【问题标题】：JQuery UI nested sortables: all nested lists/items count as one item off the root itemJQuery UI 嵌套排序：所有嵌套列表/项目都算作根项目之外的一项
【发布时间】：2012-12-02 20:35:29
【问题描述】：

我正在使用这个插件： http://mjsarfatti.com/sandbox/nestedSortable/

这似乎很棒，只是为默认的 jQueryUI 可排序添加了一些额外的选项（https://github.com/mjsarfatti/nestedSortable - 虽然不适用于 1.9+）。

然而，我似乎有一个问题，您可以从这个小提琴中看到：http://jsfiddle.net/kzswp/6/ 似乎导致所有嵌套列表项都算作最根项下的一个大项。

此外，如果您将其中一个根项拖动为另一个根项的子项，则排序字符会不一致。即使我试图将一个项目设置为已经存在的嵌套列表中的子项目，它似乎也会创建一个新列表来放置该项目。

这是我的标记：

<ol type="I" id="top-level-list">
        <li>
            <h3>Category #1</h3>
            <div class="child-items">
                    <ol type="A">
                        <li>
                             <div class="form-row" >
                                <div class="form-item">Question #1</div>
                            </div>
                    <div class="child-items">
                        <ol type="1">
                            <li>
                                <div class="required-parent-response c7ad1cdb-e727-4fb7-b0eb-0f04382dcd86">
                                    <div class="form-row" >
                                        <div class="form-item">Some other question</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="required-parent-response c7ad1cdb-e727-4fb7-b0eb-0f04382dcd86">
                                    <div class="form-row" >
                                        <div class="form-item">Branch Question - under Question #1</div>
                                    </div>
                                </div>
                            </li>
                        </ol>
                    </div>
            </li>
                    </ol>

                    </div>
        </li>
        <li>
            <h3>Category #2</h3>
            <div class="child-items">
                <ol type="A">
                    <li>
                        <div class="form-row" >
                            <div class="form-item">Category #2 - question 1</div>
                        </div>

                    </li>
                </ol>
            </div>
        </li>

我认为问题在于嵌套列表周围的<div class="child-items">（页面上的其他 JS 我需要这个），但即使在删除它之后：http://jsfiddle.net/xJzZU/1/

这仅修复了排序字符，但所有子列表及其项目仍算作一个大项目。

任何人都知道我该如何解决这个问题，同时保持child-items div 围绕这些嵌套元素？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable nested-sortable

【解决方案1】：

首先，您应该在选项中添加items 和toleranceElement。像这样的：

            $("#top-level-list").nestedSortable({
                //handle: ".ui-icon",
                maxLevels: 3,
                placeholder: "placeholder",
                help: "clone",
                revert: 300,
                opacity: .6,
                forcePlaceholderSize: true,
                tabSize: 40,
                items: 'li',
                toleranceElement: '> *'
            });

其次，不幸的是，额外的 <div class="child-items"> 不会真正与 nestedSortable 一起使用：/
那是因为插件期望ol 和li 处于直接的父子关系中......如docs 中所述，每个列表项必须具有 one 或两个子元素，其中一个是 toleranceElement，另一个是嵌套列表。

【讨论】：