Как вставлять элементы в список в определенное место, учитывая индекс элемента?

Question

[Евгений Журов]

Здравствуйте, задача:

Нужно реализовать алгоритм, который переносит пункты из первого списка во второй и обратно, сортируя их по возрастанию индекса: https://jsfiddle.net/Zhuroff/tr5fdxue/ , а не просто добавляя друг под другом в том порядке, в котором они были кликнуты.

Т.е. я кликаю по кнопке элемента из второго списка и элемент переносится в первый список. То же самое, только наоборот с первым списком. И элементы должны идти строго друг за другом в том порядке, в котором они изначально расположены в html

И можно ли здесь вообще обойтись без атрибута data-index?

Answer 1

[0xD34F]

function transfer(from, to) {
  $(from).on('click', 'button', function(e) {
    const $el = $(e.target).parent();
    const index = +$el.data('index');
    const indices = $('li', to).get().map(n => +n.dataset.index);

    if (index < indices[0] || !indices.length) {
      $(to).prepend($el);
    } else if (index > indices[indices.length - 1]) {
      $(to).append($el);
    } else {
      $(`${to} [data-index="${indices.filter(n => n < index).pop()}"]`).after($el);
    }
  });
}

transfer('#parent1', '#parent2');
transfer('#parent2', '#parent1');

Comments

[Евгений Журов]

Да, большое спасибо!

[Евгений Журов]

Правда, после того как все элементы из какого-либо списка перемещены в другой пропадает возможность вновь заполнить пустой список)

[0xD34F]

Евгений Журов, поправил.

[Евгений Журов]

Благодарю)