javascript - 将选定的对象从一个地方移动到另一个地方，然后再回到原来的位置javascript

Question

我正在制作一个关键字选择器，用户可以在其中从一个框中选择一个或多个关键字。然后将那些被选中的关键词从原来的盒子中取出并放入旁边的盒子中，显示选中的关键词。

我希望将关键字元素存储在一个数组中，但我无法弄清楚用户实际上将如何单击该元素并将其显示在对面的框中。我似乎取得任何进展的唯一方法是使用 onclick() 函数等......对于单个元素，但这不是我正在寻找的。

是否可以将这些元素从其包含的 div 中移动到空框 div 中？？。任何对此的建议或回应将不胜感激，附上一个代码片段以更好地了解问题。谢谢大家。

var kwords = [
  "audi",
  "bmw",
  "chevrolet",
  "honda",
  "mercedes",
]

function car1() {
  document.getElementById("inner").style.color = 'blue';
}

#boxleft {
  border: 5px solid blue;
  background-color: gray;
  height: 250px;
  width: 250px;
  margin-bottom: 20px;
  float: left;
}

#boxright {
  border: 5px solid blue;
  background-color: gray;
  height: 250px;
  width: 250px;
  margin-bottom: 20px;
  float: left;
  display: inline;
}

#inner {
  color: red;
}

<div id="boxleft">
  <div id="inner" onclick="car1();">audi</div>
  <div id="inner1">bmw</div>
  <div id="inner2">chevrolet</div>
  <div id="inner3">honda</div>
  <div id="inner4">mercedes</div>
</div>
<div id="boxright"></div>

Answer 1

您可以同时将 click 监听器附加到多个元素。看看this codepen .

这里发生了什么:

1. document.querySelectorAll('.keyword') 在文档中查找所有具有 keyword 类的元素(看看我是如何更改 HTML 部分的)
2. 在 forEach 循环中，element.addEventListener('click', toggleKeyword) 行向每个找到的元素添加 click 监听器(等效于手动分配 onClick 属性)
3. 现在当你点击一个关键字时，toggleKeyword 函数被执行:
4. var element = event.target;是你点击的元素
5. boxLeft 和 boxRight 变量是这两个带有 boxLeft 和 boxRight ids 的 div
6. var newParent = element.parentNode.id === 'boxleft' ? boxRight : boxLeft; 此行检查新的父元素应该是哪个，如果您在 leftbox 中单击 div 它应该转到 rightbox 反之亦然。
7. 最后，我们从它的当前父元素中删除元素并添加到相反的元素。