jquery list drag arrangement (extracting from the project is very easy to use)_jquery

Code 1 preview:

Copy code The code is as follows:

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

< ;/li>" });

dragSelector

The drag handle of the list item 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

< dd>The callback function that will be called after dragging.

dragBetween

Set to "true" if you want to enable multiple sets of lists Drag the selected list. The default value is false.

placeHolderTemplate

The default value is "<. ;li>

".

scrollContainer

Element of CSS selector, as scroll container, for example, an overflow div is set to automatic. The default value is "Window".

scrollSpeed

A number, which represents the speed. When the page drags an item, the container will be scrolled Also, higher values ​​are faster and lower values ​​are slower. If set to "0" to disable scrolling. The default value is "5".

Code 2 preview:

Copy code The code is as follows:

<script> <br>$(function() { <br>$( ".sortable" ).sortable({ <br>cursor: "move", <br>items: "li", //Only li can be dragged <br>opacity: 0.6, //When dragging, the transparency is 0.6 <br>revert: true, //When releasing, add animation <br>update : function(event, ui){ //After updating sorting<br>alert($(this).sortable("toArray")); <br>} <br>}); <br>}) ; <br></script>

• Item 1
  
• Item 2


• Item 3

Source code download