我正在使用 SortableJS 构建一个菜单，其中可以将标签项之类的哈希标签从搜索结果区域拖到另一个区域，在那里它们将被计算在内。我在两个列表之间使用了拖放功能。 现在我想做的是添加点击功能，这样当一个列表中的标签项被点击时，它会移动到相反的列表。
这应该可以帮助那些不想拖放或更愿意点击的用户。目标是适应广泛的用户设备(移动/桌面)和计算机知识(精通技术/不精通技术)。
Here is an example of Shared Lists using SortableJS.
两个列表共享 list-group 类，这使它们能够彼此共享项目。
我一直在研究创建一个脚本的可能性，该脚本获取被点击的 div 元素(从任一列表中)，删除它，并立即重新添加到相反的列表，所有 div 属性和内容完好无损的。但也许修改现有的 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()我不知道我做错了什么。
最佳答案
我认为你应该使用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>
关于javascript - 单击以在两个列表之间交换元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55738619/