如何将项目从一个列表移动到 HTML 中的另一个列表

Question

你好，我正在尝试实现这样的东西，用户可以单击一个项目并将其从左移动到右 div 或列表，反之亦然（请参阅附图）。需要跟踪项目列表，以便我能够使用 javascript 进行一些处理。我以前看到一些网站这样做过，但不确定这叫什么，有什么术语吗？我真的不知道在谷歌上搜索什么，所以我目前有点卡住了。如果有人可以提供帮助，我将不胜感激，谢谢。

Answer 1

您可以向两个列表添加click事件侦听器，将事件目标附加到另一个列表并删除事件目标。

row1.addEventListener('click', function(e){
  if(e.target != this){
    row2.appendChild(e.target.cloneNode(true));
    e.target.remove()
  }
})

row2.addEventListener('click', function(e){
  if(e.target != this){
    row1.appendChild(e.target.cloneNode(true));
    e.target.remove()
  }
})

.row {
  display: flex;
}

<div class="row">
  <ul id="row1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <ul id="row2">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>