JQuery list drag arrangement concrete implementation

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311041718413.gif? 201310417199 ">  

It's easy to implement this

First, import JS, jquery. Dragsort. JS, jquery. Dragsort -0.4.min. JS, jquery-1.4.2.min. JS.

Second, code

 
<h2> Drag and drop two sets of lists :</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> 

<!--  The sort is saved here to retrieve the return from the server  --> 
<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> 

Three,

 
<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{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;} 
</style> 

Fourth, explain

dragSelector

Drag handles for list items of elements in the CSS selector. The default value is "li".

dragSelectorExclude
The dragSelector inside the element of the CSS selector does not trigger the dragsort. The default value is "input, textarea, a[href]".
dragEnd
The callback function that will be called when the drag is complete.
dragBetween
Set to "true" if you want to enable dragging the selected list between multiple lists. The default value is false.
placeHolderTemplate
Drag the HTML part of the list. The default value is "< Li> < / li>" .
scrollContainer
CSS selector element as a scrolling container, such as overflow of divs set to automatic. The default value is "window".
scrollSpeed
A number which represents the speed, when the page drags a certain item, will scroll outside the container, the higher the use value is the speed and the lower the value is the slower. If set to "0" to disable scrolling. The default value is "5".