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

Question

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

这应该可以帮助那些不想拖放或更愿意点击的用户。目标是适应广泛的用户设备 (mobile/desktop) 和计算机知识 (tech-savvy/not 精通技术)。

Here is an example of Shared Lists using SortableJS.

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

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

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

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

-- 我发现 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

的点击方法

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

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

Click to swap elements between two lists

javascript

jquery

user-interface

dom

sortablejs