Question

我想做以下事情：

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

我想将列表中的项目A从列表B移到列表C中的列表B以外的项目A和C B是左右，A是列表C和B中的项目的“容器列表”。

列表B，容器列表，应该在开头为空。

编辑：如果可能，这应该两种方式都有效，所以如果我点击列入A列表的项目应该排序回列表C和#listA, #listB, #listC { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }

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

<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>

ion-card

我找到了一些复杂的解决方案，包括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');
});

Answer 2

将此jquery用于您的代码..它肯定会解决您的问题

$('#listA li').click(function(){
var elem=$(this).text();
$("#listB").append("<li class='ui-state-highlight'>" +elem+ "</li>");

});

$('#listC li').click(function(){
var ele=$(this).text();
$("#listB").append("<li class='ui-state-highlight'>" +ele+ "</li>");

});

我不是我可以告诉你的。但这里是jsfiddle链接 https://jsfiddle.net/3ds06kf0/66/

在列表之间单击时移动li项目

2 个答案: