复制代码 代码如下:
*{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{padding:20px;width:800px;margin:20px auto;border:solid 1px black;}
.demo h2{margin:30px 0 20px 0;color:#3366cc;}
.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-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;}
jQuery列表拖动排列演示
简单的一组列表:
- 你猜
- 你不猜
- 你不猜你不猜
- 猜猜
- 你猜不猜
- 你猜不猜不猜
- 你不猜不猜
两组列表拖放:(无限组拖放)
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
Usage
$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "" });
- dragSelector
- CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。
- dragSelectorExclude
- CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input, textarea, a[href]"。
- dragEnd
- 拖动结束后将被调用的回调函数.
- dragBetween
- 设置为“true”，如果你要启用多组列表之间拖动选定的列表。 默认值是false。
- placeHolderTemplate
- 拖动列表的HTML部分。默认值是"".
- scrollContainer
- CSS选择器的元素，作为滚动容器，例如溢出的div设置为自动。 默认值是“窗口“.
- scrollSpeed
- 一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。 如果设置为"0"以禁用滚动。默认值是"5".
代码2预览:
复制代码 代码如下:
- 第1项
- 第2项
- 第3项
源码下载
