Не могу разобраться со splice(

Question

Изначальная позиция карточек

Перетаскиваю и отпускаю

Результат корректный: 002, 003, 004, 005, 001

Но, если попробую перетащить так [ введите сюда описание изображения ] Произошло удаление и сбой в номерах, а должно было быть 002, 001, 003, 004, 005

Вот код который у меня написан (помогите пож. как правильно переписать, чтоб работал как нужно):

movingBoards(currentIndex, newIndex) {
      const currentItem = this.todoList[currentIndex];

      this.todoList.splice(currentIndex, 1);
      this.todoList[newIndex] = currentItem;
}

В this.todoList у меня вот это:

Answer 1

Так как позиции могут быть разные то нужно вызывать splice дважды (для каждого элемента)

// перемещаем второй элемент на позицию первого
const [first] = todoList.splice(currentIndex, 1, todoList[newIndex]);
// перемещаем первый элемент на позицию второго
todoList.splice(newIndex, 1, first);

В целях демонстрации я решил основываться не на данных а на элементах DOM дерева (так меньше кода и наглядно). Для перемещения нужно сделать 2 клика - откуда и куда:

const line =  document.querySelector('.line')
const todoList = Array.from(document.querySelectorAll('.board'))

let currentIndex = -1;
let newIndex = -1;

const movingBoards = () => {
   if (currentIndex !== newIndex){ // если позиции разные
     // перемещаем второй элемент на позицию первого
     const [first] = todoList.splice(currentIndex, 1, todoList[newIndex]);
     // перемещаем первый элемент на позицию второго
     todoList.splice(newIndex, 1, first);
     // обновляем DOM дерево
     todoList.forEach(e => line.appendChild(e)) 
     // cбрасываем индексы
   }
   currentIndex = newIndex = -1;
}

line.addEventListener('click', (event)=> {
  if (event.target.className === 'board'){
    const index = todoList.findIndex((e) => e  === event.target)
    if (currentIndex === -1){
      currentIndex = index
    } else {
      newIndex = index
      movingBoards(currentIndex, newIndex)
    }
  }
})

.line {
  display: flex;
}
.board {
  height: 150px;
  width: 100px;
  background: #394165;
  color: white;
  margin: 5px;
}

<div class="line">
  <div class="board">001</div>
  <div class="board">002</div>
  <div class="board">003</div>
  <div class="board">004</div>
  <div class="board">005</div>
</div>

БЛОГ НА HUSL

Не могу разобраться со splice(

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