jQuery nestedSortable - 保护两个级别免受更改

Question

我正在使用 JQuery 嵌套可排序来显示项目树，并且我想禁用前两个级别的更改。 这是jsfiddle：http://jsfiddle.net/YgF4k/18/

HTML：

<ul id='menusList'>
    <li class='sortable_false'>
        <div> <span class='menu_name'>
                <a href="edit_this_item">root1</a>
            </span>
        </div>
    <ol class='sortable'>
        <li class="sortable_false" id="menu_161">
            <div> <span class='menu_name'>
                    <a href="edit_this_item">Child 1</a>
                </span> 
            </div>
        </li>
        <li class="sortable_false" id="menu_163">
            <div> <span class='menu_name'>
                    <a href="edit_this_item">Child 2</a>
                </span> 
            </div>
            <ol>
                <li class="sortable_true" id="menu_162">
                    <div> <span class='menu_name'>
                          <a href="edit_this_item">Grandchild 1</a>
                      </span>

                    </div>
                </li>
                <li class="sortable_true" id="menu_158">
                    <div> <span class='menu_name'>
                            <a href="edit_this_item">Grandchild 2</a>
                        </span>

                    </div>
                </li>
                <li class="sortable_true" id="menu_160">
                    <div> <span class='menu_name'>
                            <a href="edit_this_item">Grandchild 3</a>
                        </span>

                    </div>
                </li>
            </ol>
        </li>
        <li class="sortable_false" id="menu_159">
            <div> <span class='menu_name'>
                <a href="edit_this_item">Child 3</a>
            </span>

            </div>
        </li>
    </ol>
    <li class="sortable_false" id="menu_2">
        <div> <span class='menu_name'>
            <a href="edit_this_item">root2</a>
            </span>

        </div>
    </li>

</li>
</ul>

jQuery:

$('.sortable').nestedSortable({
    handle: 'div',
    items: 'li',
    toleranceElement: '> div',
    protectRoot: true,
    update: function (event, ui) {
        $.post("/sort", $(this).nestedSortable('serialize'));
    }
});

更详细地说，我仍然缺少的是：

1. 不应允许将孙子级移动到子级，反之亦然。
2. 不应允许对子项进行重新排序。
3. 应该允许在 root1 子项和 root2 子项之间移动孙子项（理想情况下）。

我玩了一段时间的 protectRoot 和 items 选项的nestedSortable，但没有成功。

Answer 1

您只需将项目设置为li.sortable_true...

$('.sortable').nestedSortable({
    handle: 'div',
    items: 'li.sortable_true',
    toleranceElement: '> div',
    protectRoot: true,
    update: function (event, ui) {
        $.post("/sort", $(this).nestedSortable('serialize'));
    }
});

查看更新的小提琴：http://jsfiddle.net/f9LyM/1/

还可以查看 jQuery UI 文档，这个扩展继承了它：http://api.jqueryui.com/sortable/#option-items

Answer 2

使用最新版本的 jQuery.ui.nestedSortable（目前是 2.0）解决了protectRoot 的问题。