jQuery列表拖动排列具体实现


Posted in Javascript onNovember 04, 2013

jQuery列表拖动排列具体实现 

实现这个很简单

第一,导入JS,jquery.dragsort.js,jquery.dragsort-0.4.min.js,jquery-1.4.2.min.js。

第二,代码

<h2>两组列表拖放:</h2> <ul class="dragsort" id="list2" style="float:right;"> 
<li><div>10</div></li> 
<li><div>11</div></li> 
<li><div>12</div></li> 
<li><div>13</div></li> 
<li><div>14</div></li> 
<li><div>15</div></li> 
<li><div>16</div></li> 
<li><div>17</div></li> 
<li><div>18</div></li> 
</ul> 
<ul class="dragsort" id="list1"> 
<li><div>1</div></li> 
<li><div>2</div></li> 
<li><div>3</div></li> 
<li><div>4</div></li> 
<li><div>5</div></li> 
<li><div>6</div></li> 
<li><div>7</div></li> 
<li><div>8</div></li> 
<li><div>9</div></li> 
</ul> 
<!-- 排序保存在这里可以检索服务器上的回传 --> 
<input name="list1SortOrder" type="hidden" /> 
<script type="text/javascript"> 
$("#list1, #list2").dragsort({ 
dragSelector: "div", 
dragBetween: true, 
dragEnd: saveOrder, 
placeHolderTemplate: "<li class='placeHolder'><div></div></li>", 
scrollSpeed: 5 
}); 
function saveOrder() { 
var data = $("#list1 li").map(function(){ 
return 
$(this).children().html(); 
}).get(); 
$("input[name=list1SortOrder]").val(data.join("|")); 
}; 
</script>

三,样式
<style type="text/css"> 
*{margin:0;padding:0;list-style-type:none;} 
body{font-family:Arial;font-size:12pt;color:#333;} 
h1{font-size:16pt;} 
h2{font-size:13pt;} 
/* demo */ 
.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;} 
.demo h2{margin:30px 0 20px 0;color:#3366cc;} 
/* dragfunction */ 
.dragfunction{margin:40px 0 0 0;} 
.dragfunction dt{height:30px;font-weight:800;} 
.dragfunction dd{line-height:22px;padding:0 0 20px 0;color:#5e5e5e;} 
/* dragsort */ 
.dragsort-ver li{height:30px;line-height:30px;} 
.dragsort{width:350px;list-style-type:none;margin:0px;} 
.dragsort li{float:left;padding:5px;width:100px;height:100px;} 
.dragsort div{width:90px;height:50px;border:solid 1px black;background-color:#E0E0E0;text-align:center;padding-top:40px;} 
.placeHolder div{background-color:white!important;border:dashed 1px gray!important;} 
</style>

四,解释

dragSelector

CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。

dragSelectorExclude
CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。
dragEnd
拖动结束后将被调用的回调函数.
dragBetween
设置为“true”,如果你要启用多组列表之间拖动选定的列表。 默认值是false。
placeHolderTemplate
拖动列表的HTML部分。默认值是"<li></li>".
scrollContainer
CSS选择器的元素,作为滚动容器,例如溢出的div设置为自动。 默认值是“窗口“.
scrollSpeed
一个数字,它代表了速度,页面拖动某一项时,将滚动容器外,较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".

Javascript 相关文章推荐
javascript面向对象之二 命名空间
Feb 08 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
JQuery animate动画应用示例
May 14 jQuery
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
利用cookie记住背景颜色示例代码
Nov 04 #Javascript
判断滚动条到底部的JS代码
Nov 04 #Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 #Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 #Javascript
jquery监听div内容的变化具体实现思路
Nov 04 #Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 #Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 #Javascript
You might like
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
Redis构建分布式锁
2017/03/28 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
强悍的Python读取大文件的解决方案
2019/02/16 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
大四学年自我鉴定
2013/11/13 职场文书
连带责任保证书
2014/04/29 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android