1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8">

 5         <script src="../js/jquery-1.9.1.min.js"></script>

 6         <script src="../js/jquery-ui.min.js"></script>

 7         <title></title>

 8         <style>

 9             #divBody{

10                 border: 1px solid;

11                 width: 200px;

12             }

13             label{

14                 display: block;

15                 margin: 5px 0px;

16                 background-color:#d3e3f8;

17                 width: 100%;

18             }

19         </style>

20         <script type="text/javascript">

21             $(function(){

22                 //拖动排序

23                      $("#divBody").sortable({

24                         update: function (event, ui) {

25                             var idList = $(this).sortable("toArray", { attribute: "data-id" });

26                             console.log(idList);

27                         }

28                     });

29                     $("#divBody").disableSelection();

30

31             });

32

33         </script>

34     </head>

35     <body>

36         <div id="divBody">

37             <label draggable="true" data-id="1">模块一</label>

38             <label draggable="true" data-id="2">模块二</label>

39             <label draggable="true" data-id="3">模块三</label>

40             <label draggable="true" data-id="4">模块四</label>

41             <label draggable="true" data-id="5">模块五</label>

42             <label draggable="true" data-id="6">模块六</label>

43             <label draggable="true" data-id="7">模块七</label>

44             <label draggable="true" data-id="8">模块八</label>

45             <label draggable="true" data-id="9">模块九</label>

46             <label draggable="true" data-id="10">模块十</label>

47         </div>

48     </body>

49 </html>

PS: JS引用地址：https://blog-static.cnblogs.com/files/xy0710/jquery-ui.min.js

html拖动元素排序(插件版)的更多相关文章

  1. 拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多

    经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https: ...

  2. 一个简洁漂亮的jQuery拖放排序插件DDSort

    拖放排序是WEB应用中常见的功能.虽然网上有很多别人已经造好的轮子,但是就我个人而言,没事就喜欢研究原理,自己造轮子,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改 ...

  3. 页面内容排序插件jSort的使用

        当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序.本文将使用排序插件jSort来对页面内容进行排序. jSort插件可以对页面任何内容进行排序(ta ...

  4. JavaScript 实现鼠标拖动元素

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...

  5. 拖放排序插件Sortable.js

    特点 支持触屏设备和大部分浏览器(IE9以下的就不支持了,原因都懂得) 可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序 移动列表单元时有css动画 支持拖放操作和可选择的文本(这 ...

  6. js 函数的多图片懒加载(lazy) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...

  7. Google浏览器PostMan插件版安装步骤

    PostMan插件版安装步骤: 第一步:把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar 第二步:右键点击该文件,并使用压缩软件(如winrar.360压缩等)对该压 ...

  8. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. MixItUp：超炫！基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

随机推荐

  1. 可扩展的 Web 架构与分布式系统

    作者:Kate Matsudaira 译者:尹星 本文介绍了分布式架构是如何解决系统扩展性问题的粗略方法,适合刚刚入门分布式系统的同学,我把整篇文章翻译如下,希望给你一些启发. 备注:[idea]标注 ...

  2. python 字典和列表嵌套用法

    python中字典和列表的使用,在数据处理中应该是最常用的,这两个熟练后基本可以应付大部分场景了.不过网上的基础教程只告诉你列表.字典是什么,如何使用,很少做组合说明. 刚好工作中采集promethe ...

  3. CSS 奇思妙想 | 全兼容的毛玻璃效果

    通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...

  4. Kubernetes使用节点亲缘性将POD调度到特定节点上

    节点污点可以用来让pod远离特定的节点,尽量在不修改已有pod信息的前提,通过在节点添加污点信息,来拒绝pod在某些节点上的部署. 而现在介绍一种叫做节点亲缘性,通过明确的在pod中添加的信息,来决定 ...

  5. 『动善时』JMeter基础 — 52、使用JMeter测试Dubbo接口

    目录 1.Dubbo介绍 2.准备测试Dubbo接口的环境 3.Dubbo Sample界面详解 4.Dubbo Sample组件的使用 (1)测试计划内包含的元件 (2)使用zookeeper协议请 ...

  6. spring boot j集成seagger 加入拦截器后 swagger 不能访问

    一开始我是这样排除拦截的,但是发现没用 后来我发现swagger的真实访问路径是这样的 转自: https://blog.csdn.net/ab1991823/article/details/7906 ...

  7. mysql学习--MySQL存储引擎对比总结

    一.存储引擎是什么 存储引擎是数据库的核心,对于mysql来说,存储引擎是以插件的形式运行的.MySQL默认配置了许多不同的存储引擎,可以预先设置或者在MySQL服务器中启用.你可以选择适用于服务器. ...

  8. ADC电阻分压采集相关知识

    1.电池串联可以增加电压,电池并联可以增加电流,都是为了增加电功率.但是电池不宜并联,即使是相同规格的电池,如果消耗不同,电势就会不同,会造成电池之间的放电现象. 2.电阻的作用: 限流:为使通过用电 ...

  9. P5816 [CQOI2010]内部白点 题解

    [题目链接] [解析] 好题. 拿到题目首先先看一下它的无解情况是怎么判断的. 然后很明显这个是不存在无解情况的. 因为它的黑点开始都是给定了的,可以理解为一个边界. 而新的变化的黑点不会往外扩张,那 ...

  10. 机器学习Sklearn系列：（四）朴素贝叶斯

    3--朴素贝叶斯 原理 朴素贝叶斯本质上就是通过贝叶斯公式来对得到类别概率,但区别于通常的贝叶斯公式,朴素贝叶斯有一个默认条件,就是特征之间条件独立. 条件概率公式: \[P(B|A) = \frac ...