Question

我使用JQuery嵌套sortable来显示项目树，我想从更改中禁用前两个级别。这是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'));
    }
});

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

不应允许将孙子女带入儿童，并且不应允许这样做。
不允许重新安排儿童。
在root1子女和root2之间移动孙子女应该被允许（理想情况下）。

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

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的问题。

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

2 个答案: