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 相关文章推荐
xml转json的js代码
Aug 28 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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中var_export与var_dump的区别分析
2010/08/21 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
JavaScript修改css样式style
2008/04/15 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python导入oracle数据的方法
2015/07/10 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
企业厂长岗位职责
2013/12/17 职场文书
境外导游求职信
2014/02/27 职场文书
暑假家长评语大全
2014/04/17 职场文书
个人课题方案
2014/05/08 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
小学中队长竞选稿
2015/11/20 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
Python面试不修改数组找出重复的数字
2022/05/20 Python