开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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）来部署和运行这个示例代码。腾讯云的云服务器提供了稳定可靠的计算资源，适合部署各种类型的应用程序。您可以通过以下链接了解更多关于腾讯云云服务器的信息：腾讯云云服务器产品介绍

希望以上内容能够满足您的需求，如果还有其他问题，请随时提问。

相关搜索:(Re)存储每个克隆的可拖动JQuery的位置和大小 javascript或Jquery UI中的可排序行 jQuery UI可排序-获取与拖放相邻的项目 jQuery UI可排序:在列间拖动元素时记录来源和目标 jQuery UI可排序:拖放和重新排序交互的性能 Jquery UI可排序的向上和向下拖动操作 JQuery追加删除多个相同类div的克隆问题作为占位符的jQuery可排序own元素使用focusOut jquery实现多个字段的目标使用jquery UI可排序对多个UL和LI元素进行排序

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery源码解析之clone()

.clone(true) 表示克隆目标节点的事件和数据('div').clone(true,true) 表示克隆目标节点及其子节点的事件和数据源码： jQuery.fn.extend({ //...克隆目标节点及其子节点 //dataAndEvents是否克隆目标节点的事件和数据，默认是false //deepDataAndEvents是否克隆目标节点子节点的事件和数据，默认值是dataAndEvents...bug，主要是在fixInput()方法上进行处理（2）从目标节点克隆数据、添加事件给克隆的元素（3）将克隆的元素中的script标签设为已运行四、fixInput() 作用：（1）解决 IE...五、cloneCopyEvent() 作用： $().clone()的关键方法，用来从目标节点克隆数据、添加事件给克隆的元素注意： jQuery 采用数据分离的方法来保存 DOM 上的事件和数据，利用...if ( dataPriv.hasData( src ) ) { //private data old，即目标元素的数据 //注意：jQuery是通过uuid将目标元素进行标记，

2.6K2 0

jQuery复制html元素【jQuery框架应用入门10】

在jQuery中使用clone方法的思路是先选择需要被克隆的DOM节点，然后调用clone方法即可返回一个被克隆的新html元素。...先在原有的html页面中的body标签内添加如下代码: 我的收藏现在的目标是要将复制的歌曲...jQuery克隆第二首歌曲的代码如下所示： $("body>ol>li").eq(1).clone().appendTo("body>section>ol") 通过代码$("body>ol>li").eq...(1)去选择第二首歌曲，利用jQuery的链式写法，继续使用clone（）方法将歌曲的html元素复制到新的内存空间中，最后把这个新的DOM节点通过appendTo方法添加到body>section>ol...执行这段jQuery代码后的效果如图5-10所示。图5-10收藏歌曲 $("body>ol>li").eq(1).appendTo("body>section>ol") 效果如图5-11所示。

611 0

jQuery学习笔记之DOM操作、事件绑定（2）

appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 prepend(content):向每个匹配的元素的内部的开始处插入内容...empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。复制节点 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本....(function(){ alert("点击按钮"); }); //克隆节点，不克隆事件 $("button").clone...().appendTo("p"); //克隆节点，克隆事件 $("button").clone(true).appendTo("p"); 替换节点...语法：bind(type, [data], fn) 参数type：含有一个或多个事件类型的字符串。

1.5K1 0

如何使用meg尽可能多地发现目标主机中的多个URL地址

关于meg meg是一款功能强大的URL信息收集工具，在该工具的帮助下，广大研究人员能够在不影响目标主机和服务器的情况下，尽可能多地收集与目标主机相关的大量URL地址。...该工具的运行速度非常快，并且不会导致目标主机被恶意流量所淹没，也就是不会影响目标主机的正常运行。 ...如果你遇到安装错误问题，可能是因为你的Go环境版本太低，可以尝试使用下列方法解决： # github.com/tomnomnom/rawhttp /root/go/src/github.com/tomnomnom.../out的目录中： ▶ head -n 20 ..../hosts的文件中读取目标主机，而且不会提供任何输出： ▶ meg 但结果会存储在名为./out/index的索引文件中： ▶ head -n 2 .

1.4K2 0

jQuery_T2_DOM操作

DOM操作的内容 jQuery的DOM DOM转jQuery对象 DOM样式添加 jQuery元素属性设置 toggle切换编辑html()与text()区别 DOM添加图片纯dom添加元素克隆元素...元素属性设置设置单个属性： jQuery 对象.css(name,value); //其中name为样式名称，value为样式的值同时设置多个属性： jQuery 对象.css({name:value...,name:value,name:value…}); 上面的例子能看到设置单个属性，我们下面这个案例就是同时设置多个属性。 ...我是克隆体X——X号精钢狼 ...($("#show")); $("h1").clone(true).appendTo($("#show")); $("h1").clone(true).appendTo(

7.8K2 0

jQuery入门前言

$('通过appendTo方法添加的元素').appendTo($(".content")) 3、外部插入的after()和before...5、克隆节点clone()：克隆可以理解为复制，用法如下： //clone处理一 $("div").clone() //只克隆了div结构，事件丢失 //clone处理二 $("div").clone...区别有以下3点：起始位置不同：.closest开始于当前元素 .parents开始于父元素遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，...直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的...还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了，语法如下： $('li').add('新的p元素').appendTo(目标位置) 6

2.7K3 0

04-老马jQuery教程-DOM节点操作及位置和大小

props:用于附加到新创建元素上的属性、事件和方法返回值：返回新创建标签的jQuery包装对象 // jq的 appendTo，类似DOM的appendTo方法 $("Hello</...2.3 元素之后插入节点after(content|fn)方法参数 content：插入到每个目标后的内容，类型可以：String，DOM，jQuery fn(index,html)：函数必须返回一个...2.4 插入某个元素之后insertAfter(content)方法参数： content：插入到每个目标后的内容，类型可以：String，DOM，jQuery。...参数: html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素 element， Element类型，用于包装目标元素的DOM元素。...deepEven:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。 $("b").clone().prependTo("p"); 3.

2.1K9 0

jquery 操作DOM元素(1)

deepwithDataAndEvents 　　　　　　一个布尔值，指示是否对时间处理程序和克隆的元素的所有子元素的数据应该被复制。...content 一个或多个DOM 元素，元素数组，HTML字符串。　　　　...() 　　　将匹配的元素插入到目标元素的最后面　　　.appendTo(target) 　　　　target 一个选择符，元素，HTML 字符串，DOM 元素数组。　　　　...将所有的元素插入到目标元素前面（元素内）。　　....prependTo(target) 　　　　target 一个选择器, DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

1.3K5 0

JQuery干货篇之操控DOM

作者说 JQuery干货篇之插入元素本次使用的html,css还是我上一篇的源代码，详情请看上一篇文章分类插入子元素：append,prepend ,appendTo,prependTo 封装包裹元素...，要先创建一个新元素才能将它插入到指定位置使用$创建元素 $() clone 克隆元素，使用clone方法以已有的元素为模子生成新的元素...，但是他们的参数就不同了，append是将指定的参数插入到当前调用它的的结果集中，而appendTo是将当前调用它的结果集插入到指定的参数中，主要的形式有appendTo(jquery),append(...中，这里参数是目标位置，开头调用的时想要插入的内容 $("img:first").clone().appendTo($("img").last().parent()); //选择第一个图片插入到最后一个...dcell中，这里必须用clone，否则就会将这张图片移到目标位置 $($("div.dcell").html()).appendTo($("img").last().parent()); //这里的

9471 0

jQuery基础教程之文档处理

jQuery基础教程之文档处理一、append appendTo append(content|fn) 向每个匹配的元素内部追加内容。...$("p").append("Hello"); appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。...把原来的删除，放到新的地方 $("b").appendTo("p") 二、prepend prependTo prepend(content) 向每个匹配的元素内部前置内容。...$("p").before("Hello"); insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。...$("p").remove(); 七、clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。 $("b").clone().prependTo("p");

3881 0

04-老马jQuery教程-DOM节点操作及位置和大小

props:用于附加到新创建元素上的属性、事件和方法返回值：返回新创建标签的jQuery包装对象 // jq的 appendTo，类似DOM的appendTo方法 $("Hello</...2.3 元素之后插入节点after(content|fn)方法参数 content：插入到每个目标后的内容，类型可以：String，DOM，jQuery fn(index,html)：函数必须返回一个...2.4 插入某个元素之后insertAfter(content)方法参数： content：插入到每个目标后的内容，类型可以：String，DOM，jQuery。...参数: html， String类型，HTML标记代码字符串，用于动态生成元素并包裹目标元素 element， Element类型，用于包装目标元素的DOM元素。...deepEven:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。 $("b").clone().prependTo("p"); 上传视频标签文本框特效案例： <!

6.1K0 0

前端基础-jQuery节点操作

第10章 jQuery节点操作 10.1 创建节点 // $(htmlStr) // htmlStr：html格式的字符串 $('<span-这是一个span元素</span-'); 10.2 添加节点...append appendTo 在被选元素的结尾插入内容父.append(子) 子.appendTo(父) prepend prependTo 在被选元素的开头插入内容父.prepend...remove：相比于empty，自身也删除（自杀） $('div').remove(); 10.4 克隆节点作用：复制匹配的元素 // 复制$(selector)所匹配到的元素（深度复制） // cloneNode...(true) // 返回值为复制的新元素，和原来的元素没有任何关系了。...即修改新元素，不会影响到原来的元素。 $(selector).clone();//克隆元素本身及后代 $(selector).clone(true);//克隆元素本身及后代以及绑定的事件

7550 0

jQuery基础--总结

-1.12.4.js"> //jquery:简单、粗暴 //jq和js的关系 //js是什么？...js是一门编程语言 //jq仅仅是基于js的一个库，jq可理解为就是开发js的一个工具。 //概念 //1. 为什么要学jquery ？...什么是jquery？js库，说白了就是js文件，里面有一大堆的方法 //3. 使用jquery的步骤： 1. 引入jquery文件 2. 入口函数功能实现 //4....操作属性(3) //2.1 attr //设置单个属性 //设置多个属性 //获取属性 //2.2 prop //对于布尔类型的属性，disabled...before //4.3 清空内容 empty //4.4 删除节点 remove //4.5 克隆节点 clone

6842 0

jQuery中的DOM操作

appendTo()://将每个匹配的元素追加到指定的元素内部结尾处 $('p').appendTo("#outer"); $('#outer').append...a 删除节点： remove：$(‘#test′).remove();该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。...但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。...注意克隆后节点的id属性，避免id重复 clone(true)：复制内容，也复制行为替换节点：xxx.replace(a)用xxx把a替换掉前后宾语调换：a.replaceWith(xxx)将a替换成...xxx 节点互换需要先克隆节点包裹节点：warp() 将指定节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用。

1.2K2 0

jQuery中的DOM操作

appendTo()://将每个匹配的元素追加到指定的元素内部结尾处 $('p').appendTo("#outer"); $('#outer').append...a 删除节点： remove：$(‘#test′).remove();该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。...但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。...注意克隆后节点的id属性，避免id重复 clone(true)：复制内容，也复制行为替换节点：xxx.replace(a)用xxx把a替换掉前后宾语调换：a.replaceWith(xxx)将a替换成...xxx 节点互换需要先克隆节点包裹节点：warp() 将指定节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用。

1.4K7 0

JQuery分析及实现part4之DOM操作模块功能及实现

JQuery模块分析及其实现第四部分属性部分功能及实现,接第三部分! appendTo 方法功能:将结果集中的元素追加到指定的 dom 元素上....语法:.appendTo(target) 实现思路定义 appendTo 方法,声明一个形参 target .追加到目标 dom 元素选择器 dom 元素 dom 数组为了操作方便...{ // 如果当前dom元素为目标上的第一个.不拷贝节点 // 否则拷贝节点 node = i === 0 ?...元素的第一个子节点,再遍历 this 上的每一个 dom 元素判断当前遍历的 dom 是否为 target 上的第一个 dom 元素如果为真,此时不需要克隆节点否则,要深克隆节点将上述的到的节点...(function(dom) { //判断当前遍历的dom是否为target上的每一个dom元素 //若为真,则不需要克隆节点,否则,要深克隆节点 // 将得到的节点赋值给node

1.2K3 0

DMO节点内部插入的常用方法与区别

> 点击通过jQuery的appendTo添加元素 <script...， //无论是一个选择器表达式或创建作为标记上的标记 //它都将被插入到目标容器的末尾。... 简单的总结：　　.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同 append()前面是被插入的对象，后面是要在对象内插入的元素内容...与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo....，主要的不同是语法，插入的内容和目标的位置不同对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数而.prependTo() 正好相反

1.1K0 0

jQuery DOM操作

二、添加元素 1、.append(content[,content]) / .append(function(index,html)) 都是放在目标对象尾部，作为子元素可以一次添加多个内容，内容可以是...DOM对象、HTML string、 jQuery对象如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的...2、.appendTo(target) 和append的位置相反，把对象插入到目标元素尾部 $( "h2" ).appendTo( $( ".container" ) ); $( "Test" ).appendTo( ".inner" ); 3、.prepend(content[,content]) / .prepend(function(index,html)) 把对象插入到目标元素头部...如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值 ?

9683 0

JQuery中常用方法备忘

本文转载自博客园，原文地址 http://www.cnblogs.com/xzf158/archive/2008/10/14/logan.html 1.Window.onload 的JQuery方法...$(“p:last”).html(sString); //把值赋给最后一个P标签，以Html形式赋给，也就是说可以包含Html标签 7.页面元素有克隆 (“img.eq(1)”).clone().appendTo...((“p”)); //将第一个图片克隆到所有的P标签中 8.事件的监听 $(“img”) .bind (“click”,fnMyfun1=function(){ //添加事件1 $(“#show...fnMyfun1 }) 10.JQuery制作动画与特效――元素的显示与隐藏效果 $(“img”).hide(); $(“img”).hide(3000); //设置渐隐的时间，单位毫秒 $(“img”...).show (); $(“img”).show (3000); 还有更多特效如：fadeIn() fadeout() slideUp() slideDown() 11.JQuery的功能虑数 ·浏览器的检测

1.3K2 0

jQuery源码解析之after()insertAfter()before()prepend()的实现

child之前插入elem //由父节点调用insertBefore，在目标节点的后一节点的前面插入新节点 this.parentNode.insertBefore...源码很有意思： //源码6340行 jQuery.each( { // 在被选元素（内部）的结尾插入 HTML 元素 appendTo: "append", // 在被选元素...//如果有多个选择器，就将待插入的节点深复制 elems = i === last ?...//$().pushStack将一个DOM集合压入jQuery栈，并返回DOM集合的jQuery对象，用于链式调用 return this.pushStack( ret ); };...after() 方法 for ( ; i <= last; i++ ) { //如果有多个选择器，就将待插入的节点深复制 elems = i === last ?

9922 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭