jQuery：单击以在两个列表之间交换元素

Question

我正在使用SortableJS来构建一个菜单，其中哈希标签之类的标签项可以从搜索结果区拖到另一个计算它们的区域。我有两个列表之间的拖放功能。现在我想要做的是添加点击功能，以便当单击一个列表中的标记项时，它将移动到相反的列表。

这应该可以帮助那些不希望拖放或者更愿意点击的用户。目标是适应各种用户设备（移动/台式机）和计算机知识（精通技术/不懂技术）。

Here is an example of Shared Lists using SortableJS.

两个列表共享类list-group，这使它们能够彼此共享项目。

我一直在研究创建一个脚本的可能性，该脚本获取被点击的div元素（从任一列表中），删除它，并立即重新添加到相反的列表中，所有div属性和内容都是机智的。但是修改现有的SortableJS代码是一种更好的方法吗？

更新

作为一个快速测试，我绕过了UI并使用开发人员工具完全改变了HTML中的项目顺序，并没有破坏功能。因此，使用脚本执行相同操作应该可行。

目前，我正在研究如何在给定类的任何项目时，单击，从父元素中删除，然后创建另一个父元素的子项（另一个列表）。

更新2

我发现a simple and elegant jQuery script似乎对这类事情很有希望。我开始修改它以支持两个列表，但不幸的是，在多次交换后它停止正常工作。希望通过一些修改可以使它工作。

<!DOCTYPE html>
<html>
<head>
<style>
	div {
		width: 180px;
		padding: 2px 12px;
		margin-bottom: 10px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

<div id="div1" style="background-color: #a55">
<p class="swappable">Paragraph one.</p>
<p class="swappable">Paragraph two.</p>
</div>

<div id="div2" style="background-color: #bab1e5">
<p class="swappable">Paragraph three.</p>
<p class="swappable">Paragraph four.</p>
</div>

<script>
$("#div1 p").click(function() {
	
	$("#div2").append($(this));
	
});

$("#div2 p").click(function() {
	
	$("#div1").append($(this));
	
});
</script>

</body>
</html>

扫描the documentation for jQuery's .append()我无法弄清楚我做错了什么。

Answer 1

我认为你应该使用jQuery的click方法

    <!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 180px;
        padding: 2px 12px;
        margin-bottom: 10px;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

<div id="div1" style="background-color: #a55">
<p class="swappable">Paragraph one.</p>
<p class="swappable">Paragraph two.</p>
</div>

<div id="div2" style="background-color: #bab1e5">
<p class="swappable">Paragraph three.</p>
<p class="swappable">Paragraph four.</p>
</div>

<script>
$("#div1").on("click","p",function() {
    $("#div2").append($(this));

});

$("#div2").on("click","p",function() {
    $("#div1").append($(this));
});
</script>

</body>
</html>

jQuery：单击以在两个列表之间交换元素

问题描述投票：1回答：1

更新

更新2

1个回答

最新问题

jQuery：单击以在两个列表之间交换元素

问题描述 投票：1回答：1

更新

更新2

1个回答

最新问题

问题描述投票：1回答：1