子li不会使用jquery sortable与父ul一起移动

是指在使用jquery sortable插件时，子li元素无法与父ul元素一起移动。下面是一个完善且全面的答案：

jquery sortable是一个用于创建可排序列表的插件，它允许用户通过拖拽来重新排序列表中的元素。然而，当子li元素与父ul元素一起移动时，可能会遇到一些问题。

这个问题可能是由于jquery sortable插件的默认行为导致的。默认情况下，jquery sortable插件只会对同一个父元素下的子元素进行排序，而不会跨父元素进行排序。因此，当子li元素与父ul元素一起移动时，jquery sortable插件无法正确地处理排序操作。

解决这个问题的方法是使用jquery sortable插件的选项进行配置。可以通过设置"connectWith"选项来指定可排序的父元素，使得子li元素可以与父ul元素一起移动。具体的配置代码如下：

$(function() {
  $("ul").sortable({
    connectWith: "ul"
  }).disableSelection();
});

在上述代码中，我们通过设置"connectWith"选项为"ul"，告诉jquery sortable插件可以将子li元素与其他ul元素进行连接，从而实现子li元素与父ul元素一起移动的效果。

推荐的腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse

相关·内容

(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

Sortablejs 简介 Sortable —是一个JavaScript库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。...delayOnTouchOnly 选项是否仅在用户使用触摸（例如，在移动设备上）时才应用延迟。在任何其他情况下，都不会延迟。...delay设置此选项后，即使手指不动，某些具有非常灵敏的触摸显示屏的手机（如三星Galaxy S8）也会触发不需要的触摸移动事件，从而导致排序不会触发。...仅当您将指针移过一定的公差时才开始拖动，这样您就不会在每次单击时意外开始拖动。 3到5可能是不错的值 dragoverBubble 选项如果设置为true，则拖动事件将冒泡到父可排序对象。...默认情况下为false，但是Sortable仅在将元素插入父Sortable或可以插入父Sortable时才停止冒泡事件，但不在特定时间（由于动画等）。

7K1 0

继续死磕前端

() //跳到ul的父元素，也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp...通过： event.stopPropagation(); 既然说起阻止事件冒泡了，那么我们也提一下如何阻止表单提交吧： event.preventDefault(); 实际开发中其实常常将其混合使用，也就是两句话写在一起使用... 1 2 3 4 5 事件委托的写法... 1 2 3 4 5 3.3 Dom...ajax 技术的原理是实例化 xmlhttp 对象，使用此对象与后台通信。jquery 将它封装成了一个函数 $.ajax()，我们可以直接用这个函数来执行ajax请求。此部分超级重要！超级重要！

2.8K1 0

jQuery

’) li标签下的类名为nj的选择器层级选择器子代选择器 $(‘ul>li’) 后代选择器 $(‘ul li’)过滤选择器这类选择器都带冒号 :eq(index) $(“li:eq...);//谁调用了mouseover，然后this就是谁，且this是dom对象，使用jquery需要转换为jquery对象 }) mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 mouseenter...事件只在鼠标移动到选取的元素上时触发以后如果有鼠标移入事件，请使用mouseenter，而不是mouseover 鼠标离开事件使用mouseleave，而不是mouseout 案例-突出显示案例...那么， (1).如果子类的成员变量与父类的成员变量的类型及名称都相同，则用sTest访问时，访问到的是子类的成员变量；用pTest访问时，访问到的是父类的成员变量； (2).如果子类的静态成员变量与父类的静态成员变量的类型及名称都相同....用sTest调用未覆盖的父类成员方法时，该方法中如果使用到了被隐藏的变量或方法时，规则同上； jQuery background-color 和 backgroundColor 入口函数 $(document

1.1K2 0

jQuery 遍历

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。... 元素是元素的父元素，同时是的子元素左边的元素是的父元素，的子元素，同时是的后代。... 元素是的子元素，同时是和的后代。两个元素是同胞（拥有相同的父元素）。...右边的元素是的父元素，的子元素，同时是的后代。元素是右边的的子元素，同时是和的后代。...祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。 ---- 遍历 DOM jQuery 提供了多种遍历 DOM 的方法。

8542 0

jQuery基础(五)一Ajax应用与常用插件-imooc

如下图所示：自定义对象级插件——lifocuscolor插件自定义的lifocuscolor插件可以在元素中，鼠标在表项元素移动时，自定义其获取焦点时的背景色，即定义元素选中时的背景色...，options为调用方法时的配置对象，例如，在页面中，通过加载sortable插件将元素中的各个表项实现拖曳排序的功能，如下图所示：在浏览器中显示的效果： 3-4面板折叠插件—...例如，将三个元素与工具提示插件相绑定，当把鼠标移动在元素内容时，以动画效果弹出对应的提示图片，移出时，图片自动隐藏，如下图所示：元素中，鼠标在列表项元素移动时，可以自定义其获取焦点(focus)时的背景颜色，即设置表项元素选中时的背景色....> 第1个LI 第2个LI 第3个LI

16.5K2 0

前端之jquery函数库

jquery介绍　　jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。... 1 2 4 5 6 jquery...该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent() //跳到ul的父元素，也就是id为div1的元素 .siblings() /.../跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素 jquery属性操作...ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

5.2K2 0

【Java 进阶篇】深入理解 JQuery 事件绑定：标准方式

事件是指用户在页面上进行的操作，比如点击、鼠标移动、键盘输入等。而事件绑定则是将特定的 JavaScript 代码与页面上的某个事件相关联，以便在事件发生时执行相应的操作。... Item 1 Item 2 Item 3 在这个例子中，我们使用了事件代理，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数。...通过将事件绑定到父元素上，然后利用事件冒泡原理，在父元素上捕获事件并判断具体触发事件的子元素，从而减少了事件绑定的数量。 Item 1 Item 2 Item 3 </ul

1614 0

导航菜单优化制作

li > 后端开发移动开发...if(target==list[i]) return i; } return -1; } 该函数的返回值便是与所指父菜单相同的索引值...=zicaidan.length) throw '父类菜单和子类菜单长度不匹配'; //检索与父菜单索引相同子菜单 function findIndex...target==list[i]) return i; } return -1; } //子菜单和父菜单...fucaidan[i].style.backgroundColor='#555'; } } //检索与父菜单索引相同子菜单

3.6K7 0

导航菜单优化制作

2.6K1 0

Python全栈之jQuery笔记

>li") 使用>号,获取儿子层级的元素,注意:并不会获取孙子层的元素后代选择器 $("ul li") 使用空格,代表后代选择器,获取ul下的所有的li...$('#ul1 li:gt(2)') 选择id为ul1元素下的前三个之后的li :lt $('#ul1 li:lt(2)')...$("span").parentsUntil("div"); 返回介于与元素之间的所有祖先元素(不包含div元素). 2.jQuery遍历-后代后代是子、孙、曾孙等等...jQuery对象,可链式调用: $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素...前端性能优化分为如下几个方面: 一、代码部署: 1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息.

5.4K4 0

Web前端JQuery面试题（一）

:first :last :not :even :odd :eq :gt :lt :header :animated 获取第一个元素 1 2 ...$("li").first(); 或 $("li :first"); [ 1 ] 获取最后一个元素 1 2 $('...li').last(); $("li :last"); [ 2 ] 去除所有与给定选择器匹配的元素查找所有未选中的 input 元素 <...:nth-child 从1开始的，匹配父元素下第n个元素 $("ul li:nth-child(2)"); 获取2 3 4。。...:first-child 匹配每个父元素下的第一个子元素 :last-child 匹配每个父元素下的最后一个子元素 :only-child 匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配

2.9K2 0

jQuery

3.jQuery 对象和 Dom 对象使用的区别 JQuery 对象不能使用 DOM 对象的属性和方法 DOM 对象也不能使用 JQuery 对象的属性和方法 4.DOM 对象和 jQuery 对象互转...ul> // jQuery $("li").has("ul").css("background-color", "red"); 2.查找查找 jQuery 对象内部的元素的子孙/兄弟/父母元素, 并封装成新的...（子元素） find(selector) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的方法。...事件监听绑定在父元素上, 但事件发生在子元素上事件会冒泡到父元素但最终调用的事件回调函数的是子元素: event.target 好处: 新增的元素没有事件监听减少监听的数量(n==>1) jQuery...("ul").append("新增的li....

10.8K2 0

前端基础：jQuery

也都能做，但使用 jQuery 能大幅提高开发效率 jQuery Advantages 体积小，压缩后只有 100 KB 左右强大的选择器出色的 DOM 封装可靠的事件处理机制出色的浏览器兼容性...jQuery Usage jQuery 作为一个单独存在的 js 文件，并不会与其他的 js 文件发生冲突 ...red"); // 使用转义符 $("#h2\\#x").css("color","red"); 事件鼠标事件鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件...方法，可以把动作/方法链接在一起。...// 返回布尔型，li 的父节点是不是 ul var x = $("li").parent().is("ul"); alert(x); });

13.5K2 0

前端开发---使用bootstrap-table展示物联网数据

下面我们使用它开发页面来查询HJ 212协议传输过来的物联网传感器数据。基于前端的列排序，隐藏列，模糊搜索，列搜索，翻页都是对bootstrap-table简单的配置自动完成的。...同时使用daterangepicker插件来选择时间范围，以及可以将查询出来的数据后台导出为Excel。...class="nav navbar-nav"> 数据总览设备数据图表分析 XX的数据 <!

1.4K3 0

jQuery

jQuery 对DOM的原生方法进行了封装，jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。...对象只能使用jQuery 封装的方法。...所以，jQuery 只是对js常用属性和方法进行了封装。 DOM使用原生js方法和属性，jQuery 使用jQuery 属性和方法。...jQuery 筛选选择器 for instance：(Get the first LI under UL) $("ul li:first").css("color", "red"); jQuery 筛选方法...//$(“div”).on(“mouseover mouseout”, function() { // ...... //}); 事件委派： //li的处理事件委派给父ul，里面每个li都有了click

21K5 0

jquery选择器用法_jQuery属性选择器

（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的...2. parent>child选择器 parent>child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素，使用该选择器只能选择父元素的直接子元素...示例：(“ul li:first-child”) //匹配ul元素中的第一个子元素li :last-child...说明：匹配所有给定元素的最后一个子元素示例：(“ul li:last-child”) //匹配ul元素中的最后一个子元素li...:only-child 说明：如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配示例：(“ul

12.1K3 0

Jquery简介选择的

ul> Glen Tane Ralph jQuery 代码: $(“ul li:nth-child(...而此选择符将为每一个父元素匹配一个子元素演示样例描写叙述:在每一个 ul 中查找第一个 li HTML 代码: John Karl...匹配最后一个子元素 ‘:last’仅仅匹配一个元素，而此选择符将为每一个父元素匹配一个子元素演示样例描写叙述:在每一个 ul 中查找最后一个 li HTML 代码: John...返回值:Array 假设某个元素是父元素中唯一的子元素，那将会被匹配假设父元素中含有其它元素，那将不会被匹配。...演示样例描写叙述:在 ul 中查找是唯一子元素的 li HTML 代码: John Karl Brandon </ul

1.6K2 0

一文入门jQuery

文章目录 jQuery概念快速入门步骤： JQuery对象和JS对象区别与转换选择器：筛选具有相似特征的元素(标签) 基本操作学习事件绑定入口函数样式控制：css方法分类基本选择器...案例全选和全不选 QQ表情选择多选下拉框左右移动 jQuery概念一个JavaScript框架。简化JS开发。...除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。...最新版本：3.2.1（2017年3月20日） jquery-xxx.js 与 jquery-xxx.min.js区别： jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。...程序加载更快导入JQuery的js文件：导入min.js文件使用 var div1 = $(“#div1”); alert(div1.html()); JQuery对象和JS对象区别与转换 JQuery

3.5K2 0

JQuery高级

jQuery中定义变量的时候，一般命名用$开头。同事一看就知道是使用了jQuery，然后使用jQuery的语法。其实$是jQuery中的一个函数。...***事件冒泡现象：父子级标签触发子级的事件，这个事件会逐层向父级传递。子集执行了某一事件，会逐层向上触发相同事件，直到被处理或者遇到return。...比如子级有单击事件，那么父级如果有单击事件也会被触发，父级的父级如果有单击事件也会被触发。任何一个操作，计算机或者浏览器都会去处理。不管你有没有设置对应的事件。...（父：最近的能包含住将来发生事件的所有子级）------ 事件代理 .delegate(真实发生事件的目标，字符串事件属性，匿名函数去写命令function(){}) 工作中有可能会有人用这个词on()...共计10个函数而已：控制顺序------移动节点-------- 下面的函数，如果没有节点，那么会新增对应的节点，如果有这个节点，那么就会移动相对应的节点。所以此处没有任何函数需要学习。

1.5K5 0

JQuery

jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。...// 步骤：1、声明变量保存节点数据；2、使用追加函数追加节点 var $li = $('2222') // ul子级追加 // $li.appendTo...($('ul')) //结尾追加 // $('ul').append($li) // $li.prependTo($('ul')) // 开头追加 /...javascript发送http请求，与后台通信，获取数据和信息。...ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

9462 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

子li不会使用jquery sortable与父ul一起移动

相关·内容

(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

继续死磕前端

jQuery

jQuery 遍历

jQuery基础(五)一Ajax应用与常用插件-imooc

前端之jquery函数库

【Java 进阶篇】深入理解 JQuery 事件绑定：标准方式

导航菜单优化制作

导航菜单优化制作

Python全栈之jQuery笔记

Web前端JQuery面试题（一）

jQuery

前端基础：jQuery

前端开发---使用bootstrap-table展示物联网数据

jQuery

jquery选择器用法_jQuery属性选择器

Jquery简介选择的

一文入门jQuery

JQuery高级

JQuery

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐