Jquery可排序:克隆+ appendTo多个可能的目标
JQuery可排序是指使用JQuery库中的sortable()方法来实现对元素的排序功能。通过该方法，可以将元素集合重新排序，并且可以将排序后的元素插入到多个可能的目标位置。
具体实现步骤如下：
- 引入JQuery库：在HTML文件中引入JQuery库，可以通过CDN链接或者本地文件引入。
- 创建可排序的元素集合：在HTML文件中创建需要排序的元素集合，可以使用无序列表（ul）或者有序列表（ol）来包裹需要排序的元素。
- 应用sortable()方法：使用JQuery的sortable()方法将元素集合转换为可排序的列表。例如，如果使用无序列表，可以通过以下代码应用sortable()方法：
$("ul").sortable();- 设置排序选项：可以通过传递一个选项对象来自定义排序的行为。例如，可以设置排序的方向、拖拽的手柄、排序的容忍度等。具体的选项可以参考JQuery官方文档。
- 插入到多个可能的目标位置：使用appendTo()方法将排序后的元素插入到多个可能的目标位置。appendTo()方法可以将元素插入到指定的目标元素内。
下面是一个示例代码，演示了如何使用JQuery可排序实现克隆和插入到多个可能的目标位置：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Sortable</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("ul").sortable();
$(".clone-btn").click(function() {
var clonedElement = $(this).parent().clone();
clonedElement.appendTo(".target-container");
});
});
</script>
<style>
.target-container {
margin-top: 20px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="target-container">
<h3>Possible Targets:</h3>
</div>
<button class="clone-btn">Clone</button>
</body>
</html>在上述示例中，我们创建了一个无序列表（ul）作为可排序的元素集合。通过sortable()方法，我们使得这个列表可以被排序。在页面中有一个按钮，当点击按钮时，会将列表中的元素克隆，并插入到目标容器（target-container）中。
这里推荐使用腾讯云的云服务器（CVM）来部署和运行这个示例代码。腾讯云的云服务器提供了稳定可靠的计算资源，适合部署各种类型的应用程序。您可以通过以下链接了解更多关于腾讯云云服务器的信息：腾讯云云服务器产品介绍
希望以上内容能够满足您的需求，如果还有其他问题，请随时提问。
相关·内容
1回答
Jquery可排序:克隆+ appendTo多个可能的目标
javascript、jquery、jquery-ui-sortable
此列表中的任何项目都需要能够克隆并附加到一周7天中的一个或多个。我当前的代码只允许将一个项目克隆到7列中的一列。，但我不确定这是最有效的方法。根据光标的位置，我可以决定选择器，这样就可以按我需要的方式进行排序。<=
浏览 13提问于2019-08-09得票数 1
回答已采纳
1回答
jQuery可排序，克隆和appendTo，助手消失
jquery-ui、append、clone、jquery-ui-sortable、helper
问题是，jQuery Sortable上的克隆助手没有使用以下设置显示自己： items: "li",我使用的是jQuery
浏览 1提问于2016-10-16得票数 0
2回答
带有溢出的jQuery可排序:隐藏；在两个列表之间
javascript、jquery、html、css
我有两个列表，我可以使用jQuery sortable在它们之间移动项目。如果我将overflow设置为隐藏，当我将它们拖出一个div之后，我就看不到它们了，如果我没有设置隐藏，列表将有默认的滚动条。有没有人能提出解决方案。
谢谢
浏览 1提问于2012-05-27得票数 4
回答已采纳
2回答
如何将同一个变量追加两次？
javascript、jquery
我尝试将相同的变量追加两次，但代码似乎只在第二个变量上有效。test.innerHTML='some data';
$('#data2').append(test);
我想在不创建另一个变量的情况下追加两次变量
浏览 0提问于2012-10-04得票数 2
1回答
appendTo函数双倍运行
javascript、jquery
我有一个附加的子函数，并将新的子函数存储为一个名为“newNode”的变量。但是当我安慰newNode时，它会返回两次。为什么？我是在一个点击事件上调用这个函数。("ul:last").position(); newNode = $(newStage).appendTo
浏览 2提问于2018-02-07得票数 0
回答已采纳
1回答
jquery ui sortable正在制作副本
javascript、jquery、jquery-ui、jquery-ui-sortable
我对javascript，尤其是jQuery UI比较陌生。我正在尝试创建一个(我认为简单的)“拖放”区域，其中的拖放部分也需要是可排序的。拖放起作用了，但排序只起到了20%的作用...问题是，当我对一个元素进行排序时，它会留下一个副本和一个克隆，而不仅仅是移动它。我认为这与我在可拖放部分中设置帮助器以在可拖放区域中创建克隆有关，而当我尝试对元素进行排序<
浏览 13提问于2017-08-11得票数 0
2回答
jQuery可排序和自定义滚动条
jquery、html、css
我在我的the应用中使用自定义滚动条，但我有以下问题：
正如您所看到的，当您将一个项目拖出列表时，它是不可见的。我需要使它可见，并成为原始项目，因为我有动画触发器绑定到它。如果你查看以下内容，你可以更多地理解我正在尝试做的事情：
浏览 0提问于2012-05-29得票数 1
3回答
jquery拖放
jquery、drag-and-drop
<li>Item</li> <li>Item</li>我需要将每个项目从一个ul拖到另一个ul，但要避免在同一个ul中重复，只需将该项目添加到拖放的ul使用jQuery，我尝试了很多东西，但总有一些东西搞砸了。
有什么想法吗？thnx
浏览 1提问于2010-11-04得票数 1
回答已采纳
0回答
使用$(this)选择器将一个div的克隆追加到另一个div的子级
jquery、html
如何将一个div克隆到另一个div的子级，并且我可能需要通过$(this).find()访问目标div。我的html结构类似于 <div class="destination"></div>
<p>Content<
浏览 0提问于2017-12-09得票数 0
2回答
为什么这个jQuery不能克隆到可下垂的区域呢？
jquery、jquery-ui
当用户将菜单项拖到可下拉式区域并将其删除时，您应该会看到删除区域中的元素，原来的元素在上面仍然完好无损，但这并没有发生。正在成功地执行drop功能，因为您可以看到drop函数在成功的drop上启动。如果我在删除元素时查看DOM，就可以看到元素正在被克隆，然后在松开鼠标时立即删除。我需要做什么来实现我想要的元素的拖放？
浏览 2提问于2020-08-11得票数 0
回答已采纳
1回答
为什么jquery可排序不使用画布？
javascript、html、css、jquery-ui、jquery-plugins
我使用jquery可排序插件将画布的位置从一个容器更改为另一个容器或在同一个容器中，代码如下： $( "#sortable1, #sortable2" ).sortable({ appendTo:".column_box_one",
helper: "clone"实际上，我希望<
浏览 0提问于2019-07-26得票数 0
1回答
带有可排序表的克隆div允许拖动，但不允许排序
jquery、jquery-ui、jquery-ui-sortable
在div块中有一个可排序的项目表。我通过在最后一个div上调用clone()来添加div和它的子代，并根据需要修复输入(代码被接受，因为它与测试无关)。并将新克隆的div附加到最后一个div的父级。然而，无论我怎么尝试，我都不能让新克隆的div w/子表像它的预测器一样可排序。
浏览 0提问于2013-04-05得票数 1
回答已采纳
2回答
jQuery UI可排序连接列表css问题
javascript、jquery、css、jquery-ui、jquery-ui-sortable
我使用的jquery可排序与连接的列表。我有两个问题，其中一个最重要的要求。拖动li.ui-splitselect-item时，项位于另一个列表的后面
注意：我之前在上问过这个问题，但是没有注意到我的重要需求在解决方案中丢失了，所以我再
浏览 3提问于2013-10-30得票数 1
回答已采纳
1回答
克隆和追加新的可排序列表后，jQuery UI排序不刷新
javascript、jquery、html、jquery-ui、jquery-ui-sortable
好的，我在这里要做的是让jQuery UI更新页面上显示的排序表，当一个新列通过克隆来动态地添加到页面中时。对于初始设置来说，这很好，但是一旦克隆并追加了一个新列，事情就会中断；新克隆的列不能被识别为一个可丢弃的目标，而且我也不能将新条目从列表A拖到新克隆的列列表中。我还试图再次直接调用'.columnlist‘选择器上的</e
浏览 3提问于2012-05-03得票数 0
回答已采纳
2回答
重写这个.each()函数的更好方法
javascript、jquery
这段代码运行良好，但我猜在jQuery或vanillaJS中都有更好的重写方法。
将新创建的元素追加到新容器中。$(..grid block‘).each(函数(){ var幻灯片= $('')；$(此).find(’.资产持有人img') .clone() .appendTo(幻灯片)；$(此).find(‘.slide.<
浏览 4提问于2015-08-25得票数 0
1回答
为溢出内容创建克隆页(类似于Microsoft )
javascript、jquery、html
目标：下面的代码克隆了当可排序列表的高度与其父容器的高度匹配时创建的第一个“页面”的克隆，可以通过通过第一个列表将更多的可排序对象拖到上面来实现这一点。问题：
期望的结果适用于“页面”的第一
浏览 0提问于2019-07-08得票数 3
回答已采纳
5回答
jQuery可拖放错误(元素与光标不一致)
javascript、jquery、html、css、jquery-ui
); { $(ui.helper).removeClass("dragging"); }在elem.editor定义的容器中有一些可拖动的对象；但是，在div.lo-cont
浏览 7提问于2015-07-04得票数 2
回答已采纳
2回答
JQuery -如何在多个JQuery克隆对话框中定位正确的按钮？
javascript、jquery、jquery-ui、jquery-ui-dialog
我正在克隆JQuery Dialog的多个实例 $('.dialog').clone().appendTo('body').removeClassbutton class='dialog_pdf_button' type='button'>PDF</button>");
浏览 1提问于2019-09-11得票数 0
回答已采纳
3回答
jQuery工具可滚动:屏幕上有3个项目，但一次滚动一个
javascript、jquery、css、jquery-tools
我使用可滚动的jQuery工具，一次滚动三个项目的旋转木马，并以自动滚动和循环方式滚动一个项目。演示：
有什么我能做的吗？
浏览 2提问于2012-05-03得票数 5
回答已采纳
1回答
jQueryui；如何使用可拖动的方法在克隆上保留选定的索引
jquery、jquery-ui、jquery-ui-sortable、jquery-ui-draggable
场景:包含select下拉拖拽的可拖放的DIV元素有一个克隆助手。在下拉菜单上选择一个选项。拖动时，克隆助手不会保留新选择的选项。相反，它使用在加载元素时选择的原始选项。但我的直觉告诉我，jQuery可能应该有一个设置，以使克隆人与原始元素的变化保持一致。$( this ).val( indice ); });
浏览 2提问于2014-01-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
