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判断浏览器是否是IE的比较好的办法
May 08 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
实例分析js事件循环机制
Dec 13 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Git命令之分支详解
2021/03/02 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python数据结构之列表和元组的详解
2017/09/23 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
寒假实习自荐信
2014/01/26 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
python中validators库的使用方法详解
2022/09/23 Python