jquery - 在列表之间单击时移动 li 元素

Question

我想做以下事情:

我有三个列表，列表A、列表B、列表C。

我想通过单击将列表 A 中的元素移动到列表 B 中，并将列表 C 中的元素移动到列表 B 中，所以 A 和 C 是左和右，B 是列表 中元素的“容器列表” A 和 C。

列表B，容器列表，开头应该是空的。

编辑:如果可能的话，这应该是双向的，所以如果我点击一个我放入列表 B 的元素，它应该被分类回列表 A和 C。

这是一个非常简单的示例，说明它现在的样子:https://jsfiddle.net/3ds06kf0/2/

#listA,
#listB,
#listC {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}

<ul id="listA" class="connectedSortable">List A
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

<ul id="listB" class="connectedSortable">List B
  <!-- THIS IS EMPTY AT THE BEGINNING -->
</ul>

<ul id="listC" class="connectedSortable">List C
  <li class="ui-state-highlight">Item 6</li>
  <li class="ui-state-highlight">Item 7</li>
  <li class="ui-state-highlight">Item 8</li>
  <li class="ui-state-highlight">Item 9</li>
  <li class="ui-state-highlight">Item 10</li>
</ul>

我发现了一些复杂的解决方案，包括 Dragula JS 等，但我相信使用基本的 jquery 有更简单的解决方案，我只是无法理解它:(

Answer 1

您可以使用 appendTo 移动元素

试试这段代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$("#listA").on('click', 'li', function () {
    $(this).appendTo('#listB');
});

$("#listC").on('click', 'li', function () {
    $(this).appendTo('#listB');
});