jquery列表拖动排列(由项目提取相当好用)


Posted in Javascript onJune 17, 2014

代码一预览:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>最好的jquery列表拖动排列自定义拖动层排列</title> 
<meta name="description" content="jquery列表模块拖动层,当点击或拖动列表时,可以自定义随意拖放列表模块到相应位置。支持回调函数的拖动层。" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.dragsort-0.4.min.js"></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> 
</head> 
<body> <div class="demo"> 
<h1>jQuery列表拖动排列演示</h1> 
<h2>简单的一组列表:</h2> 
<ul class="dragsort-ver"> 
<li>你猜</li> 
<li>你不猜</li> 
<li>你不猜你不猜</li> 
<li><input type="checkbox" name="intro_fields[]" value="猜猜"/>猜猜</li> 
<li>你猜不猜</li> 
<li>你猜不猜不猜</li> 
<li>你不猜不猜</li> 
</ul> 
<br/> 
<script type="text/javascript"> 
$("ul:first").dragsort(); 
</script> 
<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> 
<div style="clear:both;"></div> 
<h2>Usage</h2> 
$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li></li>" });<br/> 
<br/> 
<dl class="dragfunction"> 
<dt>dragSelector</dt> 
<dd>CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。</dd> 
<dt>dragSelectorExclude</dt> 
<dd>CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。</dd> 
<dt>dragEnd</dt> 
<dd>拖动结束后将被调用的回调函数.</dd> 
<dt>dragBetween</dt> 
<dd>设置为“true”,如果你要启用多组列表之间拖动选定的列表。 默认值是false。</dd> 
<dt>placeHolderTemplate</dt> 
<dd>拖动列表的HTML部分。默认值是"<li></li>".</dd> 
<dt>scrollContainer</dt> 
<dd>CSS选择器的元素,作为滚动容器,例如溢出的div设置为自动。 默认值是“窗口“.</dd> 
<dt>scrollSpeed</dt> 
<dd>一个数字,它代表了速度,页面拖动某一项时,将滚动容器外,较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".</dd> 
</dl> 

</div> 
</body> 
</html>

代码2预览:
<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery UI sortable()实现拖动排序</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 
<script> 
$(function() { 
$( ".sortable" ).sortable({ 
cursor: "move", 
items :"li", //只是li可以拖动 
opacity: 0.6, //拖动时,透明度为0.6 
revert: true, //释放时,增加动画 
update : function(event, ui){ //更新排序之后 
alert($(this).sortable("toArray")); 
} 
}); 
}); 
</script> 
<ul class="sortable"> 
<li class="ui-state-default" id="1">第1项</li> 
<li class="ui-state-default" id="2" >第2项</li> 
<li class="ui-state-default" id="3">第3项</li> 
</ul> 
</body> 
</html>

源码下载
Javascript 相关文章推荐
jquery插件之easing使用
Aug 19 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 #Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 #Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 #Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 #Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 #Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 #Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 #Javascript
You might like
php有效防止同一用户多次登录
2015/11/19 PHP
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
微信小程序python用户认证的实现
2019/07/29 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
公司端午节活动方案
2014/02/04 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
保护环境的建议书
2014/03/12 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python