jquery列表拖动排列(由项目提取相当好用)_jquery



代码一预览:
代码如下:

jQuery列表拖动排列演示

简单的一组列表:

你猜

你不猜

你不猜你不猜

猜猜

你猜不猜

你猜不猜不猜

你不猜不猜

$("ul:first").dragsort();

两组列表拖放:(无限组拖放)

10

11

12

13

14

15

16

17

18

1

2

3

4

5

6

7

8

9

$("#list1, #list2").dragsort({
dragSelector: "div",
dragBetween: true,
dragEnd: saveOrder,
placeHolderTemplate: "

",
scrollSpeed: 5
});

function saveOrder() {
var data = $("#list1 li").map(function(){
return
$(this).children().html();
}).get();
$("input[name=list1SortOrder]").val(data.join("|"));
};

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预览:
代码如下:










$(function() {
$( ".sortable" ).sortable({
cursor: "move",
items :"li", //只是li可以拖动
opacity: 0.6, //拖动时，透明度为0.6
revert: true, //释放时，增加动画
update : function(event, ui){ //更新排序之后
alert($(this).sortable("toArray"));
}
});
});

第1项

第2项

第3项

源码下载