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. 555定时器（1）单稳态触发器电路及Multisim实例仿真

    555定时器(Timer)因内部有3个5K欧姆分压电阻而得名,是一种多用途的模数混合集成电路,它能方便地组成施密特触发器.单稳态触发器与多谐振荡器,而且成本低,性能可靠,在各种领域获得了广泛的应用. ...

  2. Springboot WebFlux集成Spring Security实现JWT认证

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 简介 在之前的文章<Springboot集成Spring Security实现JWT认证>讲解了如何在传统 ...

  3. 一文带你走遍Git世界，教会你Git的使用

    @ 目录 这篇文章教会Git 1. Git是什么? 1.1 发展历程 1.2 Git是什么? 1.3 Git和SVN 2.Git有什么用? 2.1 代码合并 2.2 代码备份 2.3 代码还原 2.4 ...

  4. .NET Worker Service 部署到 Linux 作为 Systemd Service 运行

    上一篇文章我们了解了如何将.NET Worker Service 作为 Windows 服务运行,今天我接着介绍一下如何将 Worker Service 部署到 Linux 上,并作为 Systemd ...

  5. form 向java控制类 提交多表数据 、提交list数组数据

    案例:form中有三个表的数据,一个主表,两个子表 1.在主表model类添加 对应子表数据集 2.界面上主表定义 3.控制类接收,直接用主表对象接收即可

  6. 【转载】CentOS-yum安装Nginx

    查看系统版本 $ cat /etc/redhat-release Nginx 不在默认的 yum 源中,使用官网的 yum 源 $ rpm -ivh http://nginx.org/packages ...

  7. 其他：Spring5.0框架源码导入IDEA

    1.下载Spring spring-framework-5.0.4.RELEASE下载地址:https://github.com/spring-projects/spring-framework/re ...

  8. Hibernate中用到联合主键的使用方法，为何要序列化，为何要重写hashcode 和 equals 方法

    联合主键用Hibernate注解映射方式主要有三种: 第一.将联合主键的字段单独放在一个类中,该类需要实现java.io.Serializable接口并重写equals和hascode,再将该类注解为 ...

  9. Swoole异步投递task任务

    [使用场景] Swoole的task模块可以用来做一些异步的慢速任务.耗时场景.如webim中发广播,发送邮件等,把这些任务丢给task进程之后,worker进程可以继续处理新的数据请求,任务完成后会 ...

  10. CSS 奇思妙想 | 巧妙的实现带圆角的三角形

    之前在这篇文章中 -- <老生常谈之 CSS 实现三角形>,介绍了 6 种使用 CSS 实现三角形的方式. 但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?,像 ...