在列表之间单击时移动li项
在列表之间单击时移动li项
提问于 2018-04-18 14:49:35
我想做以下几点：
我有三个列表，列表A，list B，list C。
我希望将单击list A上的项移到list B中，将项从list C中移到list B中，这样A和C就会左右移动，B是来自list A和C的项的“容器列表”。
列表B，容器列表，应该在开头为空。
B编辑:如果可能的话，这应该是双向的，所以如果我点击了一个项目，我把它放到了list 中，它应该被重新排序到list 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有更简单的解决方案，我就是无法理解它：
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-18 14:54:23
可以使用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');
});Stack Overflow用户
发布于 2018-04-18 15:41:56
在代码中使用这个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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49902809
复制相关文章
相似问题
腾讯云开发者
