Перемещение элемента из одного массива в другой

Question

Я пытался сделать следующее Stackblitz , которое использует ng2-dragula.Моя проблема заключалась в функциях moveback() и moveto(), которые должны были переходить из одного массива в другой, когда элемент был выбран.Я смог определить, какой элемент был выбран, но не смог полностью переместить его (какой-то элемент остался).

Код, относящийся к этому вопросу:

  moveback() {
    let target = document.getElementsByClassName('target');
    for (let i = 0; i < target.length; i++) {
      if (target[i].className.includes('ex-over')) {
        this.removeClass(target[i], 'ex-over');
        this.data.push({ name: target[i].innerHTML });
        this.target.splice(i, 1);
      }
    }
  }

  moveto() {
    let target = document.getElementsByClassName('data');
    for (let i = 0; i < target.length; i++) {
      if (target[i].className.includes('ex-over')) {
        this.removeClass(target[i], 'ex-over');
        this.target.push({ name: target[i].innerHTML });
        this.data.splice(i, 1);
      }
    }
  }

Я нашел два связанных с (1) , related (2) вопрос, который задает похожую вещь, но он не работает в моем случае.Мой подход заключался в том, чтобы обнаружить, что элемент содержит определенное имя класса, затем удалить класс, переместить его в другой массив и удалить его из исходного массива.Но это не работает так, как задумано.

Answer 1

Обновите ваше условие for, как показано ниже.

for (let i = target.length - 1; i >= 0; i--) {...}

Проблема с вашей логикой заключается в следующем: если вы выберете элемент 2nd & 3rd и примените moveto, то для элемента 2nd он будет работать нормально.,Но тогда ваш фактический this.target массив будет изменен.Теперь элемент 3rd станет 2nd из-за вашей строки this.target.splice(i, 1);.Поэтому, когда вы перемещаете элемент 3rd в итерации цикла for, он фактически перемещается на 4th единицу.

Проверка с обновленным скриптом Здесь