Вложенный jquery ui sortable: как обновить индексы?

0

У меня есть вложенный "список" 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();

Теперь я хочу обновить Numbers в элементах в соответствии с их положением, когда divs перетаскиваются. Поэтому мне нужно каким-то образом выбрать элементы, не выбирая внутренние элементы. Элементы могут находиться внутри других элементов, поэтому они не могут быть прямыми детьми вытащенных.

Я не очень хорошо разбираюсь в JS, поэтому любая помощь будет оценена по достоинству.

Теги:
jquery-ui-sortable

1 ответ

0
Лучший ответ

Я нашел решение. Он работает, сравнивая ближайший.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++;
            }
        });
    }
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню