使用jquery的sortable将项目从一个列表复制到另一个列表
使用jQuery的sortable插件可以实现将项目从一个列表复制到另一个列表的功能。sortable是一个可拖拽排序的插件，它允许用户通过拖拽来重新排序元素。
具体步骤如下：
- 引入jQuery和sortable插件的库文件。可以在jQuery官方网站上下载最新版本的jQuery库文件，并在HTML文件中引入。同时，也需要下载sortable插件的库文件，并在HTML文件中引入。
- 创建两个列表，一个是源列表，一个是目标列表。在HTML文件中创建两个无序列表（ul），分别代表源列表和目标列表。每个列表项（li）代表一个项目。
- 使用jQuery选择器选中源列表，并调用sortable()方法。通过调用sortable()方法，使源列表具备可拖拽排序的功能。
- 设置sortable的参数。可以通过传递一个参数对象来设置sortable的各种参数，例如axis（限制拖拽的方向）、handle（指定拖拽的句柄）、placeholder（设置占位符的样式）等。
- 使用jQuery选择器选中目标列表，并调用sortable()方法。同样地，使目标列表具备可拖拽排序的功能。
完整的代码示例如下：
<!DOCTYPE html>
<html>
<head>
<title>使用sortable插件复制项目</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
border: 1px solid #ccc;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
cursor: move;
}
</style>
<script>
$(function() {
$("#source-list, #target-list").sortable({
connectWith: ".sortable-list"
}).disableSelection();
});
</script>
</head>
<body>
<h1>使用sortable插件复制项目</h1>
<h2>源列表</h2>
<ul id="source-list" class="sortable-list">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<h2>目标列表</h2>
<ul id="target-list" class="sortable-list">
</ul>
</body>
</html>在上述代码中，我们使用了jQuery的选择器选中源列表和目标列表，并调用sortable()方法使它们具备可拖拽排序的功能。通过设置connectWith参数，可以实现源列表和目标列表之间的项目复制。
这是一个简单的示例，你可以根据实际需求进行扩展和定制。如果你想了解更多关于sortable插件的详细信息，可以访问腾讯云的jQuery sortable插件介绍页面：jQuery sortable插件介绍。
相关·内容
1回答
jQuery UI /如何允许一个可排序的接收，但不发送项目？
jquery-ui、jquery-ui-sortable
我有一些jQuery UI可排序列表，并希望将项目从一个列表移到另一个列表。除了一个阻止列表:它应该能够接收来自其他列表的项目，但是这个列表中的项目甚至不应该对被移动的尝试做出反应。这个是可能的吗？我试图在start事件中使用.so
浏览 2提问于2017-10-23得票数 0
回答已采纳
1回答
同时拖动多个列表项
jquery、jquery-ui、drag-and-drop
我有两个与jQuery UI的sortable连接的列表，允许将项目从一个列表拖到另一个列表。
有没有一种简单的方法可以同时拖动几个项目--例如，从左到右移动项目#3、#4和#7？
浏览 2提问于2010-06-24得票数 1
回答已采纳
1回答
Jquery连接列表-更新输入字段中的序列化列表值
jquery、list、jquery-ui-sortable
伙计们，我在试着解决一个问题。
我有两个可以在jQuery中使用connectWith进行排序的列表。我正在尝试创建一个过程，该过程在每次将项目从一个列表移动到另一个列表时进行更新，该过程使用每个列表中id的序列化列表来更新两个隐藏的输入字
浏览 0提问于2012-01-08得票数 0
我需要一个简单而清晰的JQuery代码示例如何连接两个可排序列表(使用可排序UI)，其中一个位于iframe中。
请考虑下面的示例。主文档中有一个可排序列表(#sortable1)。另一个可排序列表(#sortable2)在iframe中。我需要能够将项目从一个列表拖到<em
浏览 2提问于2011-03-08得票数 0
1回答
使用jQuery UI将可排序列表连接在一起并更新SQL
ajax、jquery-ui、jquery-ui-sortable
我正在使用jQuery UI的可排序列表对待办事项列表中的项目进行排序，并且列表的重新排序非常有用。
对于每个待办事项类别，我都有几个UL列表，即设计、开发等。我希望能够将项目从一个类别移动到另一个类别，而jQuery UI的可排序列表插件允许我使用conn
浏览 3提问于2010-03-22得票数 0
1回答
将Jquery可排序的所有项拖在一起
jquery、jquery-ui、jquery-plugins、jquery-ui-sortable
我使用jQuery sortable在三个列表之间拖放项目，如下所示。在某些情况下，我需要将所有项目从一个列表移动到另一个列表。我在stackoverflow中通过了几个链接，但无法使其工作。$( "#sortable1, #sortable2, #sortable3" ).sortable
浏览 1提问于2013-05-16得票数 0
1回答
使用jquery的sortable将项目从一个列表复制到另一个列表
jquery、jquery-ui-sortable
我有一个普通的可排序列表和一个“工具箱”，我想从这个“工具箱”中将元素放入列表中。举个例子：<ul id="toolbox"> <li>item 2</li>我希望当您拖动工具箱的某个元素时，它会创建一个</em
浏览 1提问于2010-11-13得票数 3
回答已采纳
3回答
jQuery UI可排序列表和两个连接列表
jquery、events、jquery-ui、drag-and-drop、jquery-ui-sortable
我正在尝试将以下内容与jQuery和Sortable结合起来:有两种情况我需要掌握：Case B仅在使用receive事件时得到解决。但是，如果我同时绑定receive和stop，那么在将项目从一个列表移到另一个列表时，它们也会被触发。这使得我无法捕获case A，因为我无法
浏览 5提问于2011-02-03得票数 15
回答已采纳
1回答
带有Jquery ui可排序问题的jquery瘦卷轴
javascript、jquery、html、css、jquery-ui-sortable
嗨，我遇到了一种情况，我正在使用jquery滚动插件和jquery可排序。问题是，当我将项目从一个列表项拖到另一个列表项时，右边的滚动条不会随之移动，因此，如果必须将列表拖到最后一个列表项区域，除非使用鼠标轮，否则我不能去那里。因此，当我将项目从一个
浏览 4提问于2017-02-07得票数 9
2回答
JQuery -排序div的麻烦
jquery、jquery-ui-sortable、droppable
我对JQuery和整个web开发基本上都是新手。我尝试将一些div (+它们的内容)从左边的div (#selection)拖到右边的div (#drop)，然后使它们在'#drop‘div中可排序。我已经完成了拖动部分，但是即使我已经实现了必要的代码，它们在'#drop‘div中也是不可排序的。')); break; }
浏览 1提问于2013-03-26得票数 0
回答已采纳
1回答
无法将多个SPFieldLookupValue从一个列表复制到另一个列表
c#、sharepoint
我有一个场景，我需要将SharePoint列表项从一个列表复制到另一个列表，它包括各种类型的字段，如文本、查找和人员组。我试图使用下面的代码将查找字段从一个列表复制到另一个列表，但它所做的是只将循环中的最后一个值复制到<e
浏览 0提问于2015-11-29得票数 0
1回答
拖放时两个不同容器的Jquery UI可排序顺序
javascript、jquery、jquery-ui、drag-and-drop
我的视频编辑器有两个不同的容器。一个容器用于维护用户上传的视频缩略图。我在同一个容器中进行了拖放操作，并使用以下脚本更新了DB中的订单，以备将来使用
<script src="jquery/jquery-ui-1.8.custom.min.js"></script"text/javascript">
浏览 3提问于2013-09-10得票数 1
1回答
将手动更改恢复为2个已连接的jquery ui可排序lsts
javascript、jquery、jquery-ui、jquery-ui-sortable
我有多个jquery ui可排序列表，只要一个列表接收到条目，这些列表就会连接并手动平衡到N个条目-就像下面的答案：
但是，当您在列表之间手动移动项时(使用jquery的.appendTo()或.prependTo())，jquery ui可排序库不会检测到这些更改，因此当您使用"cancel“命令恢复状态时，手动移动的项不会放回其原始列表</e
浏览 1提问于2013-01-13得票数 0
4回答
JQuery可排序ConnectWith不起作用
jquery、jquery-ui、jquery-ui-sortable
我有两个可排序的列表。我想要连接这些列表，这样我就可以在两个方向上将项目从一个列表移动到另一个列表。我使用可排序的connectWith，但仍然不能将列表项从一个列表移动到另一个列表。此外，我还可以将项目从一</e
浏览 5提问于2013-02-06得票数 9
回答已采纳
1回答
jquery可排序添加元素
jquery、list、jquery-ui-sortable、drag
我使用jquery sortable将元素从一个列表拖放到另一个列表。但这会将元素从一个列表移动到另一个列表。我正在寻找一个功能，当我从第一个列表中拖动它时，它将元素添加到第二个列表中。所以在拖动之后，元素应该同时出现在两个列表</
浏览 0提问于2014-08-19得票数 0
1回答
JQuery UI可排序接收事件不会捕获同一列表中的drops。哪个事件会这样？
jquery-ui、jquery-ui-sortable
使用JQuery UI sortable，我在"receive“事件上有一个ajax调用。它捕获了将卡片从一个列表拖放到另一个列表的过程。但是，它不会捕获将卡片从列表中拖动到列表中的不同位置。代码如下：
<script src="http://code.jquery
浏览 1提问于2017-05-03得票数 2
1回答
jQuery可排序插件-当悬停在目标项上时获取目标项的id
jquery、jquery-ui
我使用jQuery可排序插件将项目从一个列表移动到另一个列表。当我拖动该项目时，它应该首先获得该项的id，然后获得我要悬停到的项的id，以便在值相同的情况下替换它，或者如果值不同则将项目移回原始列表。我<
浏览 3提问于2017-05-15得票数 1
回答已采纳
1回答
如何在使用jquery的‘Sortable的更新事件时停止双回调？
jquery、sorting、jquery-ui-sortable
我只使用jquery sortable构建一个可排序列表，并且(通过调用UpdateSorderOrder)使用update事件更新DB中的sortorder。这里的问题是，当项目移动到另一个列表时，update事件提供了两个对UpdateSorderOrder函数的回调，但如果项目在同一列表中排序，则它会执行一次回调。当<em
浏览 0提问于2012-01-17得票数 2
回答已采纳
1回答
JQuery排序小问题
jquery、jquery-ui
我有以下带有Jquery排序的html代码 <li class="ui-state-default">Item 6</li>
<&
浏览 4提问于2012-06-26得票数 0
回答已采纳
1回答
jQuery UI可删除:如何删除释放鼠标的元素
jquery、jquery-ui、jquery-ui-draggable、jquery-ui-droppable
我使用Droppable方法使容器接收div元素。jQuery('#source').sortable();
drop: function( event, ui ) {
$( "<div></div>" ).text( ui.draggable.te
浏览 2提问于2015-05-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
