Question

我有一个div的嵌套“列表”，应该使用jquery ui sortable重新排序。

<div class="sortable">
    <div>
        <span class="sortableIndex">1</span>
        <div class="sortable">
            <div>
                <span class="sortableIndex">1</span>
            </div>
            <div>
                <span class="sortableIndex">2</span>
            </div>
        </div>
    </div>
    <div>
        <span class="sortableIndex">2</span>
        <div class="sortable">
            <div>
                <span class="sortableIndex">1</span>
            </div>
            <div>
                <span class="sortableIndex">2</span>
            </div>
        </div>
    </div>
</div>

JavaScript非常简单：

$('.sortable').sortable();

现在我想根据拖动div时的位置更新元素中的Numbers。所以我需要一些方法来选择元素而不选择内部元素。元素可能位于其他元素内部，因此它们可能不是被拖动的直接子元素。

我不是很擅长JS，所以任何帮助都会受到赞赏。

Answer 1

我找到了解决方案。它的工作原理是将最接近的.sortable元素与拖动元素为直接子元素的.sortable元素进行比较。如果匹配，我可以更新号码。如果它们不匹配，则它们不属于嵌套列表的同一级别。

$('.sortable').sortable({
    update: function (event, ui) {
        var self = ui.item;
        var p = self.parent('.sortable');
        var elems = p.find('.sortableindex');

        var order = 1;
        elems.each(function () {
            var elem = $(this);
            var closest = elem.closest('.sortable');
            if (closest[0] == p[0]) {
                elem.text(order);
                order++;
            }
        });
    }
});

嵌套jquery ui sortable：如何更新索引？

1 个答案: