使用jquery的sortable将项目从一个列表复制到另一个列表
jQuery Sortable 跨列表复制功能实现
基础概念
jQuery UI 的 Sortable 组件允许用户通过拖放操作对列表中的元素进行重新排序。当需要实现跨列表复制功能时，可以通过配置 Sortable 的 connectWith 选项来实现列表间的交互。
实现方法
基本实现代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.list-container {
display: flex;
gap: 20px;
}
.list {
width: 200px;
min-height: 200px;
border: 1px solid #ccc;
padding: 10px;
background: #f9f9f9;
}
.item {
margin: 5px 0;
padding: 5px;
background: #fff;
border: 1px solid #ddd;
cursor: move;
}
</style>
</head>
<body>
<div class="list-container">
<ul id="list1" class="list">
<li class="item">项目1</li>
<li class="item">项目2</li>
<li class="item">项目3</li>
</ul>
<ul id="list2" class="list">
<li class="item">项目A</li>
<li class="item">项目B</li>
</ul>
</div>
<script>
$(function() {
$("#list1, #list2").sortable({
connectWith: ".list",
receive: function(event, ui) {
// 复制项目而不是移动
if($(this).has(ui.item).length > 1) {
$(ui.item).remove();
}
}
}).disableSelection();
});
</script>
</body>
</html>关键配置选项
- connectWith: 指定可以连接的其他可排序列表的选择器
- receive 事件: 当从另一个列表接收到项目时触发
- helper: 可以自定义拖拽时的辅助元素
- clone: 设置为 true 时会在拖拽时创建副本
高级实现（保留原列表项目）
$(function() {
$("#list1, #list2").sortable({
connectWith: ".list",
helper: "clone", // 拖拽时创建副本
start: function(event, ui) {
// 标记原始项目
ui.item.data("original-parent", ui.item.parent());
},
stop: function(event, ui) {
// 如果拖拽到同一列表，则移除副本
if(ui.item.parent().is(ui.item.data("original-parent"))) {
ui.item.remove();
}
}
}).disableSelection();
});常见问题及解决方案
问题1：项目被移动而不是复制
原因: 默认行为是移动项目
解决: 使用 helper: "clone" 并在 stop 事件中处理
问题2：拖拽时出现多个副本
原因: 没有正确处理接收逻辑
解决: 在 receive 事件中检查项目是否已存在
问题3：样式混乱
原因: CSS 冲突 解决: 确保为拖拽元素和占位符设置明确的样式
应用场景
- 任务管理系统（将任务从一个列表复制到另一个列表）
- 购物车功能（将商品添加到购物车）
- 内容管理系统（在不同区域间复制内容块）
- 表单构建器（拖拽字段到表单中）
通过合理配置 jQuery UI Sortable，可以实现灵活的跨列表复制功能，满足各种交互需求。
相关·内容
我有一些jQuery UI可排序列表，并希望将项目从一个列表移到另一个列表。除了一个阻止列表:它应该能够接收来自其他列表的项目，但是这个列表中的项目甚至不应该对被移动的尝试做出反应。这个是可能的吗？我试图在start事件中使用.so
浏览 2提问于2017-10-23得票数 0
回答已采纳
1回答
我有两个与jQuery UI的sortable连接的列表，允许将项目从一个列表拖到另一个列表。
有没有一种简单的方法可以同时拖动几个项目--例如，从左到右移动项目#3、#4和#7？
浏览 2提问于2010-06-24得票数 1
回答已采纳
伙计们，我在试着解决一个问题。
我有两个可以在jQuery中使用connectWith进行排序的列表。我正在尝试创建一个过程，该过程在每次将项目从一个列表移动到另一个列表时进行更新，该过程使用每个列表中id的序列化列表来更新两个隐藏的输入字
浏览 0提问于2012-01-08得票数 0
我需要一个简单而清晰的JQuery代码示例如何连接两个可排序列表(使用可排序UI)，其中一个位于iframe中。
请考虑下面的示例。主文档中有一个可排序列表(#sortable1)。另一个可排序列表(#sortable2)在iframe中。我需要能够将项目从一个列表拖到<em
浏览 2提问于2011-03-08得票数 0
我正在使用jQuery UI的可排序列表对待办事项列表中的项目进行排序，并且列表的重新排序非常有用。
对于每个待办事项类别，我都有几个UL列表，即设计、开发等。我希望能够将项目从一个类别移动到另一个类别，而jQuery UI的可排序列表插件允许我使用conn
浏览 3提问于2010-03-22得票数 0
1回答
我使用jQuery sortable在三个列表之间拖放项目，如下所示。在某些情况下，我需要将所有项目从一个列表移动到另一个列表。我在stackoverflow中通过了几个链接，但无法使其工作。$( "#sortable1, #sortable2, #sortable3" ).sortable
浏览 1提问于2013-05-16得票数 0
我有一个普通的可排序列表和一个“工具箱”，我想从这个“工具箱”中将元素放入列表中。举个例子：<ul id="toolbox"> <li>item 2</li>我希望当您拖动工具箱的某个元素时，它会创建一个</em
浏览 1提问于2010-11-13得票数 3
回答已采纳
3回答
我正在尝试将以下内容与jQuery和Sortable结合起来:有两种情况我需要掌握：Case B仅在使用receive事件时得到解决。但是，如果我同时绑定receive和stop，那么在将项目从一个列表移到另一个列表时，它们也会被触发。这使得我无法捕获case A，因为我无法
浏览 5提问于2011-02-03得票数 15
回答已采纳
1回答
嗨，我遇到了一种情况，我正在使用jquery滚动插件和jquery可排序。问题是，当我将项目从一个列表项拖到另一个列表项时，右边的滚动条不会随之移动，因此，如果必须将列表拖到最后一个列表项区域，除非使用鼠标轮，否则我不能去那里。因此，当我将项目从一个
浏览 4提问于2017-02-07得票数 9
2回答
我对JQuery和整个web开发基本上都是新手。我尝试将一些div (+它们的内容)从左边的div (#selection)拖到右边的div (#drop)，然后使它们在'#drop‘div中可排序。我已经完成了拖动部分，但是即使我已经实现了必要的代码，它们在'#drop‘div中也是不可排序的。')); break; }
浏览 1提问于2013-03-26得票数 0
回答已采纳
我有一个场景，我需要将SharePoint列表项从一个列表复制到另一个列表，它包括各种类型的字段，如文本、查找和人员组。我试图使用下面的代码将查找字段从一个列表复制到另一个列表，但它所做的是只将循环中的最后一个值复制到<e
浏览 0提问于2015-11-29得票数 0
1回答
我的视频编辑器有两个不同的容器。一个容器用于维护用户上传的视频缩略图。我在同一个容器中进行了拖放操作，并使用以下脚本更新了DB中的订单，以备将来使用
<script src="jquery/jquery-ui-1.8.custom.min.js"></script"text/javascript">
浏览 3提问于2013-09-10得票数 1
我有多个jquery ui可排序列表，只要一个列表接收到条目，这些列表就会连接并手动平衡到N个条目-就像下面的答案：
但是，当您在列表之间手动移动项时(使用jquery的.appendTo()或.prependTo())，jquery ui可排序库不会检测到这些更改，因此当您使用"cancel“命令恢复状态时，手动移动的项不会放回其原始列表</e
浏览 1提问于2013-01-13得票数 0
我有两个可排序的列表。我想要连接这些列表，这样我就可以在两个方向上将项目从一个列表移动到另一个列表。我使用可排序的connectWith，但仍然不能将列表项从一个列表移动到另一个列表。此外，我还可以将项目从一</e
浏览 5提问于2013-02-06得票数 9
回答已采纳
1回答
我使用jquery sortable将元素从一个列表拖放到另一个列表。但这会将元素从一个列表移动到另一个列表。我正在寻找一个功能，当我从第一个列表中拖动它时，它将元素添加到第二个列表中。所以在拖动之后，元素应该同时出现在两个列表</
浏览 0提问于2014-08-19得票数 0
使用JQuery UI sortable，我在"receive“事件上有一个ajax调用。它捕获了将卡片从一个列表拖放到另一个列表的过程。但是，它不会捕获将卡片从列表中拖动到列表中的不同位置。代码如下：
<script src="http://code.jquery
浏览 1提问于2017-05-03得票数 2
我使用jQuery可排序插件将项目从一个列表移动到另一个列表。当我拖动该项目时，它应该首先获得该项的id，然后获得我要悬停到的项的id，以便在值相同的情况下替换它，或者如果值不同则将项目移回原始列表。我<
浏览 3提问于2017-05-15得票数 1
回答已采纳
我只使用jquery sortable构建一个可排序列表，并且(通过调用UpdateSorderOrder)使用update事件更新DB中的sortorder。这里的问题是，当项目移动到另一个列表时，update事件提供了两个对UpdateSorderOrder函数的回调，但如果项目在同一列表中排序，则它会执行一次回调。当<em
浏览 0提问于2012-01-17得票数 2
回答已采纳
1回答
我有以下带有Jquery排序的html代码 <li class="ui-state-default">Item 6</li>
<&
浏览 4提问于2012-06-26得票数 0
回答已采纳
1回答
我使用Droppable方法使容器接收div元素。jQuery('#source').sortable();
drop: function( event, ui ) {
$( "<div></div>" ).text( ui.draggable.te
浏览 2提问于2015-05-21得票数 1
回答已采纳
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
