Question

我有一个页面列出了某些项目可以嵌套在其他项目下的项目。我希望能够在任何级别对项目进行排序，而不会让它们超出其级别（无论是在上面还是下面）。结构如下：

<div class="sub_items">
    <div class="item">
        <div>some item related stuff</div>
        <div class="sub_items">
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div>some item related stuff</div>
        <div class="sub_items">
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
            <div class="item">
                <div>some item related stuff</div>
                <div class="sub_items">
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div>some item related stuff</div>
        <div class="sub_items">
        </div>
    </div>
</div>

所以我希望每个级别的项目都可以在该级别进行排序。通过使用以下内容，我可以使所有sub_items列表可以排序，但是它们可以上下移动，并且在使用serialize时返回嵌套项目（我希望只返回给定级别的项目而不嵌套值）。

Answer 1

我从未在网上找到这个答案，但根据我看到的其他内容找出了答案。我们的想法是，通过使用jquery选择器，我们可以将匹配限制在一个深度（不使用特殊库）。

不能工作：

$('.sub_items').sortable({
    placeholder: "ui-sortable-placeholder",
    update: function(e, ui) {
        console.log($(this).sortable('toArray'));
    }
});

使用：

$('.sub_items').sortable({
    items: ">.item",
    placeholder: "ui-sortable-placeholder",
    update: function(e, ui) {
        console.log($(this).sortable('toArray'));
    }
});

这样做是将可排序项目仅限制为当时正在处理的.sub_items直接下降的项目，就像$（＆＃39; .sub_items＆gt; .item＆＃39;）只会选择项目一样这是一个深度。

防止Jquery可排序项目移动到父级或子级嵌套可排序列表

1 个答案: