jQuery列表拖动排列具体实现


Posted in Javascript onNovember 04, 2013

jQuery列表拖动排列具体实现 

实现这个很简单

第一,导入JS,jquery.dragsort.js,jquery.dragsort-0.4.min.js,jquery-1.4.2.min.js。

第二,代码

<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>

三,样式
<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>

四,解释

dragSelector

CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。

dragSelectorExclude
CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。
dragEnd
拖动结束后将被调用的回调函数.
dragBetween
设置为“true”,如果你要启用多组列表之间拖动选定的列表。 默认值是false。
placeHolderTemplate
拖动列表的HTML部分。默认值是"<li></li>".
scrollContainer
CSS选择器的元素,作为滚动容器,例如溢出的div设置为自动。 默认值是“窗口“.
scrollSpeed
一个数字,它代表了速度,页面拖动某一项时,将滚动容器外,较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".

Javascript 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 Javascript
利用cookie记住背景颜色示例代码
Nov 04 #Javascript
判断滚动条到底部的JS代码
Nov 04 #Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 #Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 #Javascript
jquery监听div内容的变化具体实现思路
Nov 04 #Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 #Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
python制作简单五子棋游戏
2019/06/18 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python中eval与int的区别浅析
2019/08/11 Python
python 等差数列末项计算方式
2020/05/03 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
自荐信需注意事项
2014/01/25 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2014年采购工作总结
2014/11/20 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
论文评审意见
2015/06/05 职场文书
初中思想品德教学反思
2016/02/24 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
Elasticsearch 数据类型及管理
2022/04/19 Python