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 相关文章推荐
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
js前端导出Excel的方法
Nov 01 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
python字符串对其居中显示的方法
2015/07/11 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Django实现学员管理系统
2019/02/26 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
详解python中的异常和文件读写
2021/01/03 Python
python 对xml解析的示例
2021/02/27 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
特色冷饮店创业计划书
2014/01/28 职场文书
合作意向书范本
2014/03/31 职场文书
中班下学期个人总结
2015/02/12 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
中秋节祝酒词
2015/08/12 职场文书
小学班长竞选稿
2015/11/20 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书