jquery List drag arrangement specific implementation _jquery

It's simple to achieve this.

First, import js,jquery.dragsort.js,jquery.dragsort-0.4.min.js,jquery-1.4.2.min.js.

Second, the Code

Copy Code code as follows:

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

<!--sort Save Here you can retrieve the postback on 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

Copy Code code as follows:

<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 * *
. demo{padding:20px;width:800px;margin:20px auto;border:solid 1px black;
. Demo h2{margin:30px 0 20px 0;color: #3366cc;}
* Dragfunction * *
. 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 * *
. 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>

Four, explain

Dragselector

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

Dragselectorexclude
The dragselector within the elements of the CSS selector does not trigger the dragsort. The default value is "input, textarea, A[href]".
Dragend
The callback function that will be invoked when the drag ends.
Dragbetween
Set to True if you want to enable dragging a selected list between multiple sets of lists. The default value is False.
Placeholdertemplate
Drag the HTML portion of the list. The default value is "<li></li>".
Scrollcontainer
The elements of a CSS selector, as a scrolling container, such as an overflow div set to Automatic. The default value is window.
Scrollspeed
A number, which represents the speed, when the page drags an item, will scroll the container outside, the higher use value is the speed and the lower value is slower. If set to "0" to disable scrolling. The default value is "5".