Блог

У меня есть сортируемый список с соответствующим массивом данных, мне нужно изменить порядок массива при изменении порядка списка. Я использую этот код

 o.dom.$editor.find('.sortable').sortable({
    start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('startIndex', start_pos); // store original index
    },
    change: function(event, ui) {
        var start_pos = ui.item.data('startIndex'); // get original index
        var index = ui.placeholder.index() - 1; // get new index
        console.log(start_pos, index); // log start and end positions for debugging

        ui.item.data('startIndex', index); // store new index
    }
});
  

В качестве примера, допустим, у меня есть этот список:

 A
B
C
  

Я удерживаю элемент списка A и перетаскиваю его вниз, событие изменения срабатывает дважды, сначала заменяя элемент A на элемент B, затем A на C, консоль показывает:

 0 1
1 2
  

И это правильно. Теперь (НЕ отпуская мышь от предыдущего перетаскивания) я перетаскиваю элемент A обратно наверх, снова событие изменения срабатывает дважды, заменяя A на C, затем A на B, консоль показывает:

 2 1
1 0
  

Все хорошо.
Теперь, если я отпущу мышь и начну перетаскивать элемент B наверх, событие изменения срабатывает один раз, заменяя B на A, но консоль показывает:

 1 -1
  

Что неверно. Что здесь происходит? Я пытался понять это в течение нескольких часов.

jsfiddle: https://jsfiddle.net/4dtdk2qo/1 /

Проблема в var index = ui.placeholder.index() - 1; очереди.

• При перемещении элемента сверху вниз индекс для ui.placeholder.index() начинается с 1
• при перемещении элемента снизу вверх индекс для ui.placeholder.index() начинается с 0

Я изменил логику получения индекса.

 $(function(){
  $('.sortable').sortable({
    start: function(event, ui) {
	  var start_pos = ui.item.index();
	  ui.item.data('startIndex', start_pos);
	},
	change: function(event, ui) {
	  var start_pos = ui.item.data('startIndex');
	  var index = ui.placeholder.index();
	  index = (start_pos > index) ? index : index - 1; 
	  $("#output").append(start_pos   ' '   index   '<br>');
      ui.item.data('startIndex', index);
	}
  });
})  

 li{
  display: block;
  background: lightgreen;
  margin:20px 0;
}

#output{
  width:100%;
  min-height: 20px;
  background: lightgray;
}  

 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<ul class='sortable'>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<div id="output">