单击以在两个列表之间交换元素答案

【问题标题】：Click to swap elements between two lists单击以在两个列表之间交换元素
【发布时间】：2019-04-18 03:12:18
【问题描述】：

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

这应该可以帮助那些不希望拖放或宁愿点击的用户。目标是适应广泛的用户设备（移动/桌面）和计算机素养（精通技术/不精通技术）。

Here is an example of Shared Lists using SortableJS.

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

我一直在研究创建一个脚本的可能性完好无损的。但也许修改现有的 SortableJS 代码是更好的方法？

-- 作为一个快速测试，我绕过 UI 并使用开发人员工具纯粹在 HTML 中更改了项目的顺序，它并没有破坏功能。所以对脚本做同样的事情应该可以。

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

-- 我发现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()我不知道我做错了什么。

【问题讨论】：

查看 SortableJS 的下一个版本分支 swap 模式：github.com/SortableJS/Sortable/tree/next-version#swap-option
@OwenM 我下载了“下一个版本”，启用了swap，并试了一下。虽然该功能也很有用，但它与我在这种情况下尝试做的不同。我需要可以移动的项目，无论是拖动还是点击。我想这是我提出功能请求的机会？对于双列表配置（共享列表和克隆），请考虑使用clickable 选项。目前，Parth Jasani 的回答使 jQuery 成为我的解决方案。 SortableJS 是一个非常方便的库，我发现它很容易定制/实现，所以谢谢！

标签： javascript jquery user-interface dom sortablejs

【解决方案1】：

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

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

【讨论】：

谢谢你，效果很好！你知道我在语法上做错了什么吗？我不想再犯同样的错误。
当你想在动态元素上执行任何事件时，“p”标签是动态的，因为 p 标签将被附加或分离，#div1 和 #div2 是静态元素，所以在这种情况下，你需要告诉jQuery p 标签在#div 中使用on 方法是动态的