Specific implementation of jQuery list drag arrangement_jquery

 

实现这个很简单

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

第二，代码

复制代码 代码如下:

两组列表拖放:

• 10


• 11


• 12


• 13


• 14


• 15


• 16


• 17


• 18

• 1


• 2


• 3


• 4


• 5


• 6


• 7


• 8


• 9

",
scrollSpeed: 5
});

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


三，样式

复制代码 代码如下:

Four, explanation

dragSelector

The drag handle of the list item of the element within the CSS selector. The default value is "li".

dragSelectorExclude
The dragSelector within the CSS selector element will not trigger dragsort. The default value is "input, textarea, a[href]".
dragEnd
A callback function that will be called after dragging has finished.
dragBetween
Set to "true" if you want to enable dragging between multiple sets of lists for the selected list. The default value is false.
placeHolderTemplate
Drag the HTML portion of the list. The default value is "

".
scrollContainer
CSS selector element that acts as a scroll container, such as an overflowing div set to automatic. The default value is "window".
scrollSpeed ​​
A number, which represents the speed. When dragging an item on the page, it will scroll outside the container. The higher the value is, the faster it is and the lower value is slower. of. If set to "0" to disable scrolling. The default value is "5".