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. JavaScript的核心语法

    1.JavaScript同其他程序设计语言一样,有着独特的语法结构,主要包含:变量.数据类型.运算符号.控制语句和注释等. 2.变量是存储数据的基本单位,JavaScript通常利用变量来参与j各种运 ...

  2. SpringBoot缓存管理(一) 默认缓存管理

    前言 Spring框架支持透明地向应用程序添加缓存对缓存进行管理,其管理缓存的核心是将缓存应用于操作数据的方法(包括增删查改等),从而减少操作数据的执行次数(主要是查询,直接从缓存中读取数据),同时不 ...

  3. lms框架服务注册中心

    服务注册中心原理 在分布式系统里的注册中心.原理是将部署服务的机器地址记录到注册中心,服务消费者在有需求的时候,只需要查询注册中心,输入提供的服务名,就可以得到地址,从而发起调用. 在微服务架构下,主 ...

  4. 工作3年,还不会写单元测试?新技能get!

    历史遗留代码不敢重构? 每次改代码都要回归所有逻辑? 提测被打回? 在近期的代码重构的过程中,遇到了各式各样的问题.比如调整代码顺序导致bug,取反操作逻辑丢失,参数校验逻辑被误改等. 上线前需要花大 ...

  5. __sync_fetch_and_add函数(Redis源码学习)

    __sync_fetch_and_add函数(Redis源码学习) 在学习redis-3.0源码中的sds文件时,看到里面有如下的C代码,之前从未接触过,所以为了全面学习redis源码,追根溯源,学习 ...

  6. 利用C语言将混乱数字排序(即冒泡排序法)(含思路)

    大一C语言 你没学过吗 这篇可以称的上入门级别的c语言了 当然还有水仙花数,冒泡排序等经典的C语言程序 后面也会逐一更新 尽情期待喔~~~ 冒泡排序法的基本思路为:每次将相邻的两个数比较,将小的调在前 ...

  7. Linux:获取Linux离线postgresql数据库安装包并部署

    获取离线安装包(方法一) 1. 进入官网:https://www.postgresql.org/ 2. 下载步骤 (1)点击Download (2) 选择安装的服务器的版本  (3)更新yum源 #更 ...

  8. Dart学习记录(一)——对象

    1. 静态成员.方法 1.1 static 声明 1.2 静态.非静态方法可访问静态成员.调用方法:静态方法不可访问静态成员.调用方法: 1.3 静态成员.方法,属于类的 ,不用实例化对象就可使用,不 ...

  9. DIY一个智能开关kwswitch

    源码地址:https://gitee.com/kerwincui/kwswitch 平台简介 该智能开关平台包括服务端.硬件端.PC端和安卓端.硬件使用ESP8266模块,成本相对较低,可以发挥想象力 ...

  10. ARTS第三周

    第三周.上周欠下了 赶紧补上,糟糕了 还有第四篇也得加紧了 难受. 1.Algorithm:每周至少做一个 leetcode 的算法题2.Review:阅读并点评至少一篇英文技术文章3.Tip:学习至 ...