将一个数组中的元素移动到另一个数组中

Question

我尝试制作以下使用ng2-dragula的Stackblitz。我的问题出现在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);
      }
    }
  }

我发现了两个相关的问题related(1), related(2)，它们问的类似，但在我的情况下不起作用。我的方法是检测元素是否包含特定的类名，然后删除该类并将其移动到另一个数组中，并从原始数组中删除它。但它并没有像预期的那样工作。

- Mukyuu

Answer 1

更新您的 for 条件如下。

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

你的逻辑问题在于，如果你选择 第二和第三 个元素并应用 moveto，那么对于 第二 个元素，它将正常工作。但是，实际上你的 this.target 数组将被更改。现在，第三 个元素将变成 第二 个元素，因为你的这行代码 this.target.splice(i, 1);。所以当你在 for 循环迭代中移动 第三 个元素时，它实际上会移动 第四 个元素。

在此处检查更新后的fiddle

- Karan