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 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
javascript中indexOf技术详解
May 07 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
小程序组件之自定义顶部导航实例
Jun 12 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中神奇的fastcgi_finish_request
2011/05/02 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
表单内同名元素的控制
2006/11/22 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
javascript调试说明
2010/06/07 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python 第一步 hello world
2009/09/25 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
keras实现多种分类网络的方式
2020/06/11 Python
python Cartopy的基础使用详解
2020/11/01 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
大学生求职计划书
2014/04/30 职场文书
低碳环保演讲稿
2014/08/28 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
护士2015年终工作总结
2015/04/29 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers