html拖动元素排序(插件版)
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拖动元素排序(插件版)的更多相关文章
- 拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多
经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https: ...
- 一个简洁漂亮的jQuery拖放排序插件DDSort
拖放排序是WEB应用中常见的功能.虽然网上有很多别人已经造好的轮子,但是就我个人而言,没事就喜欢研究原理,自己造轮子,不管强大与否,简洁够用就是我的目标,再一个就是自己写的东西,应用起来得心应手,修改 ...
- 页面内容排序插件jSort的使用
当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序.本文将使用排序插件jSort来对页面内容进行排序. jSort插件可以对页面任何内容进行排序(ta ...
- JavaScript 实现鼠标拖动元素
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
- 拖放排序插件Sortable.js
特点 支持触屏设备和大部分浏览器(IE9以下的就不支持了,原因都懂得) 可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序 移动列表单元时有css动画 支持拖放操作和可选择的文本(这 ...
- js 函数的多图片懒加载(lazy) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...
- Google浏览器PostMan插件版安装步骤
PostMan插件版安装步骤: 第一步:把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar 第二步:右键点击该文件,并使用压缩软件(如winrar.360压缩等)对该压 ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件
MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...
随机推荐
- 02 SVN 与 Git 的优缺点
上一篇博客大致聊了聊关于版本控制系统的周边,这一篇我们就来继续唠唠作为近年来最受欢迎的两个版本控制系统的优缺点吧. 聊优缺点之前,先简单了解一下这两个这两个版本控制系统好了: 关于 SVN SVN 概 ...
- hud 3308 LCIS 线段树 区间合并
题意: Q a b 查询[a, b]区间的最长连续递增子序列的长度 U a b 将下表为a的元素更新为b 区间合并一般都有3个数组:区间最值,左区间最值和右区间最值 具体详见代码 #include & ...
- kmp算法 汇总
来源:http://blog.csdn.net/qq_34494458/article/details/75253466 KMP算法,是由Knuth,Morris,Pratt共同提出的模式匹配算法,其 ...
- ExtJs4学习(十)Grid单元格换色和行换色的方法
Grid单元格换色 { text:'类别', dataIndex:'type', align:'center', renderer:function(value,metaData){ console. ...
- ROS2学习之旅(4)——理解ROS2 Graph中的节点
ROS(2)图(ROS(2) graph)是一个同时处理数据的基于ROS2元素的网络,它包含了所有的可执行文件以及它们之间的连接.图中的基本元素包括:节点(nodes).话题(topics).服务(s ...
- luogu2594 [ZJOI2009]染色游戏
做法其他题解已经说得很清楚了,但似乎没有对于本题 SG 函数正确性的证明,我来口胡一下( 证明: 猜想: \[\operatorname{SG}(i,j)=\begin{cases}\operator ...
- c语言:putchar
函数:1.C语言是一门函数语言,由多个函数组成,至少有一个主函数.2.主函数的写法:下面四种写法都正确 main() main(void) int main() int main(void):int表 ...
- yoyogo v1.7.6 增强程序优雅退出和K8s Readiness检查
YoyoGo (Go语言框架)一个简单.轻量.快速.基于依赖注入的微服务框架( web .grpc ),支持Nacos/Consoul/Etcd/Eureka/k8s /Apollo等 . 本次更新增 ...
- deepin安装Motrix,cocomusic
1,motrix(下载工具):https://motrix.app/ 2,cocomusic(开源音乐播放器):https://github.com/xtuJSer/CoCoMusic/release ...
- sshd_config详解
# $OpenBSD: sshd_config,v 1.101 2017/03/14 07:19:07 djm Exp $ # This is the sshd server system-wide ...