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：单击可在两个列表之间交换元素

更新

更新2

1 个答案: