Сортировка элементов через JQ UI и массива

Question

Есть массив, который выводит список элементов.
Элементы можно менять местами при помощи jQuery UI - .sortable().
Вопрос заключается в том, как после сортировки изменить и позиции сортируемых элементов в массиве.

let arr = [
  'element 1',
  'element 2',
  'element 3',
  'element 4',
  'element 5'
];

for(let i = 0; i < arr.length; i++) {
  $('.list').append(`<div data-i="${i}">${arr[i]}</div>`);
}

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

.list > div.ui-sortable-helper {
  color: green;
}

.list > div {
  cursor: move;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div class="list"></div>

Answer 1

У sortable() есть ряд событий >> https://api.jqueryui.com/sortable/ , куда можно передать callback-функцию. Немного поигрался с ними, для этой задачи надежнее всего оказалось событие stop. У change появляются проблемы, если не отпуская быстро сортировать несколько элементов подряд.

let arr = [
  'element 1',
  'element 2',
  'element 3',
  'element 4',
  'element 5'
];

for(let i = 0; i < arr.length; i++) {
  $('.list').append(`<div data-i="${i}">${arr[i]}</div>`);
}

$('.list').sortable({
  stop: function(e) {
    $('.list div[data-i]').each(function(i) {
      arr[i] = $(this).text();
    });
    console.log(arr);
  }
});

.list > div.ui-sortable-helper {
  color: green;
}

.list > div {
  cursor: move;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div class="list"></div>

От предыдущего варианта ответа

arr = $('.list div[data-i]').toArray().map(el => el.textContent);

отказался, потому что после присваивания, начальный массив теряется (который в теории может быть передан в другие части кода). А текущий цикл меняет только элементы массива.

БЛОГ НА HUSL

Сортировка элементов через JQ UI и массива

Ответы (1 шт):