1: The Sortable component can change a group of elements on the page to Sortable.To define a list of sortable elements. You can drag the mouse to adjust the position of the elements in the list.
$ ('. Selector'). sortable (options );
Simple Example:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> sortable component </title>
<Script language = "javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. core. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. mouse. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. sortable. js"> </script>
<Link href = "CSS/base/jquery.ui.all.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
Body {
Text-align: center;
Margin: 0 auto;
Padding: 0;
}
# Wrap {
Margin: 10px auto 10px auto;
Padding: 5px;
Width: pixel PX;
Height: 300px;
Background: # fff;
Border: 5px solid #000;
}
H1 {
Color: #006;
Font-size: 24px;
Font-weight: bold;
Margin-bottom: 2px;
Text-align: center;
}
# Sortable {
List-style-type: none;
Margin: 0;
Padding: 0;
Width: 100%;
}
# Sortable li {
Margin: 3px;
Padding: 0.4em;
Font-size: 16px;
Height: 18px;
}
# Sortable li span {
Position: absolute;
Margin-left:-1.3em;
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Sortable"). sortable (); // Changes sortable to sortable
$ ("# Sortable"). disableSelection (); // make the text unselectable
});
</Script>
</Head>
<Body>
<Div id = "wrap">
<H1> drag the mouse to adjust the sequence of the following options <Ul id = "sortable">
<Li class = "ui-widget-content"> Monday </li>
<Li class = "ui-widget-content"> Tuesday </li>
<Li class = "ui-widget-content"> Wednesday </li>
<Li class = "ui-widget-content"> Thursday </li>
<Li class = "ui-widget-content"> Friday </li>
<Li class = "ui-widget-content"> Saturday </li>
<Li class = "ui-widget-content"> Objective 7 </li>
</Ul>
</Div>
</Body>
</Html>
:
2: associated sorting list
Generally, more than two lists are sorted at the same time as the associated sorting list. You can use the connectWidth attribute to set a selection character so that you can specify the order of Moving Elements between different lists.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> sortable component </title>
<Script language = "javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. core. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. mouse. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. sortable. js"> </script>
<Link href = "CSS/base/jquery.ui.all.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
. Message_box {
Width: 180px;
Height: 200px;
Filter: dropshadow (color = #666666, offx = 3, offy = 3, positive = 2 );
Float: left;
Margin-right: 10px;
}
# Mask {
Position: absolute;
Top: 0;
Left: 0;
Width: expression (body. clientWidth );
Height: expression (body. clientHeight );
Background: #666;
Filter: ALPHA (opacity = 60 );
Z-index: 1;
Visibility: hidden
}
. Message {
Border: #036 solid;
Border-width: 1 1 3 1;
Width: 95%;
Height: 95%;
Color: #036;
Font-size: 12px;
Line-height: 150%;
Background: # FFF
}
. Header {
Background: #036;
Height: 22px;
Font-family: Verdana, Arial, Helvetica, sans-serif;
Font-size: 12px;
Padding: 3px 5px 0px 10px;
Color: # fff;
Cursor: move;
}
Ul {
Margin-left: 10px;
Margin-right: 10px;
Background: # eee;
Padding: 5px;
Width: 150px;
}
Li {
Font-size: 14px;
}
. Header div {
Display: inline;
Width: 150px;
}
. Header span {
Float: right;
Display: inline;
Cursor: hand;
}
. File,. folder {
Width: 60px;
Float: left;
Margin-right: 10px;
}
. File em,. folder em {
Clear: both;
Font-size: 12px;
Font-style: normal;
Text-decoration: underline;
}
. Droppable {
Height: 200px;
Overflow: auto;
}
# Res {
Clear: both
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var msg = "";
Function callback (e, ui ){
If (e. type = "sortstart "){
Msg = "you have selected the game:" + ui. item. text ();
$ ("# Res"). empty ();
} Else if (e. type = "sortremove "){
Msg + = ", from the list" + e.tar get. id;
} Else if (e. type = "sortreceive "){
Msg + = "move to list" + e.tar get. id + ". ";
} Else if (e. type = "sortstop "){
$ ("# Res"). append (msg );
}
}
$ ("Ul"). sortable ({
ConnectWith: "ul ",
Start: callback,
Remove: callback,
Receive: callback,
Stop: callback
}). DisableSelection ();
$ ("# Sortable2"). sortable ({"dropOnEmpty": false });
});
</Script>
</Head>
<Body>
<Div id = "message_box1" class = "message_box">
<Div class = "message">
<Div class = "header">
<Div> casual games </div>
<Span> × </span> </div>
<Ul id = "sortable1">
<Li> pineapple cake </li>
<Li> character calculator </li>
<Li> my terror hut </li>
<Li> pinming Wenxiang tea ceremony </li>
<Li> Chinese version of brute-force matcher </li>
</Ul>
</Div>
</Div>
<Div id = "message_box1" class = "message_box">
<Div class = "message">
<Div class = "header">
<Div> small games </div>
<Span> × </span> </div>
<Ul id = "sortable2">
<Li> legend of the werewolf of Altman </li>
<Li> penguin fighter </li>
<Li> blade of monthly eclipse </li>
<Li> the ultimate champion </li>
<Li> Grand Slam finals </li>
</Ul>
</Div>
</Div>
<Div id = "message_box1" class = "message_box">
<Div class = "message">
<Div class = "header">
<Div> excellent Games </div>
<Span> × </span> </div>
<Ul id = "sortable3">
</Ul>
</Div>
</Div>
<Div id = "res"> </div>
</Body>
</Html>
:
3: Sorting component method
3.1 serialize method:This method serializes the id attribute of sortable elements into a form or Ajax string that can be submitted. The syntax format is as follows:
$ ("# Sortable"). sortable (serialize ", [options]);
3.2 toArray method:This method serializes the IDs of sortable elements into a string array. The syntax format is as follows:
$ ("# Sortable"). sortable ("toArray ");
3.3 refresh method:Method used to refresh the sortedlist
$ ("# Sortable"). sortable ("refresh ");
3.4 refreshPositons method:This method is used to refresh the cache location of sortable elements. The syntax format is as follows:
$ ("# Sortable"). sortable ("refreshPositions ");
3.5 cancel:The method is used to cancel the order changes of elements in the current sortedobject.
$ ("# Sortable"). sortable ("cancel ");
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> sortable component </title>
<Script language = "javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. core. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. mouse. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. sortable. js"> </script>
<Link href = "CSS/base/jquery.ui.all.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
Body {
Text-align: left;
Margin: 0 auto;
Padding: 0;
}
# Wrap {
Margin: 10px auto 10px auto;
Padding: 5px;
Width: pixel PX;
Height: 330px;
Background: # fff;
Border: 5px solid #000;
Float: left;
}
# Result {
Margin: 10px;
Padding: 2px;
Width: 470px;
Height: 330px;
Background: # fff;
Border: 1px solid #999;
Float: left;
}
H1 {
Color: #006;
Font-size: 24px;
Font-weight: bold;
Margin-bottom: 2px;
Text-align: center;
}
# Sortable, # connect {
List-style-type: none;
Margin: 0;
Padding: 0;
Width: 100%;
}
# Sortable li, # connect li {
Margin: 3px;
Padding: 0.4em;
Font-size: 16px;
Height: 18px;
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Sortable"). sortable ({connectWith: '# connect '});
$ ("# Connect"). sortable ();
$ ("# Sortable"). disableSelection ();
$ ("# Btn"). click (function (){
Var result = $ ("# sortable"). sortable ('serialize ',{
Connected: true,
Attribute: 'att ',
Key: 'att ',
Expression:/^ (? : Sort _) (. +) $/
});
('{Msg'{.html({('{msg'}.html () + result + '<br/> ');
});
});
</Script>
</Head>
<Body>
<Div id = "wrap">
<H1> adjust the order of the following courses <Ul id = "sortable">
<Li class = "ui-widget-content" att = "sort_1.1"> 1.1 link to an external. JS file </li>
<Li class = "ui-widget-content" att = "sort_1.2"> 1.2 use the Microsoft Script Editor </li>
<Li class = "ui-widget-content" att = "sort_1.3"> 1.3 Use A while LOOP </li>
<Li class = "ui-widget-content" att = "sort_1.4"> 1.4 Use the for loop </li>
</Ul>
<Ul id = "connect">
<Li class = "ui-widget-content" att = "sort_2.1"> 2.1 use Switch statements </li>
<Li class = "ui-widget-content" att = "sort_2.2"> 2.2 Use Array object attributes </li>
<Li class = "ui-widget-content" att = "sort_2.3"> 2.3 use the String object method </li>
<Li class = "ui-widget-content" att = "sort_2.4"> 2.4 use the Date object method </li>
</Ul>
</Div>
<Div id = "result">
<Input type = "button" name = "button" id = "btn" value = "Confirm modification"/>
<P id = "msg"> </p>
</Div>
</Body>
</Html>
:
Here, att is used as the key and the value is a string defined by att in the layout.
4: Sorting time callback function
You can define callback functions to control sorting operations more flexibly.
4.1 start:The event type is sortstart, which is triggered when sorting starts.
4.2 sort:The event type is sort, which is triggered during sorting.
4.3 change:The event type is sortchange. It is triggered when the element position changes during sorting.
4.4 beforestop:The event type is sortbeforestop. It is triggered when sorting is stopped but placeholders or auxiliary elements are still available.
4.5 stop:The event type is sortstop, which is triggered when the sorting process is stopped.
4.6 update:The event type is sortupdate. It is triggered when the sorting process is stopped and the element position has changed.
4.7 receive:The event type is sortreceive. It is triggered when the sort list of the connection receives an element from another list.
4.8 remove:The event type is sortremove. triggered when a sortable element is removed from the list and placed in another list.
4.9 over:The event type is sortover. triggered when one sortable element is moved to another connection list.
4.10 out:The event type is sortout. This event is triggered when a sortedelement is removed from the connection list.
4.11 activate:The event type is sortactivate. This event is triggered when the sort list of connections is used. Each connection list receives this event when it is dragged.
4.12 deactivate:The event type is sortdeactivate. triggered when the sort operation is stopped, this event will be propagated to all possible connection lists.
Copy codeThe Code is as follows:
$ ("# Droppable"). droppable ({
EventName: function (event, ui ){
}
});
Ui is a jQuery object containing additional information. This jQuery object has the following attributes:
Helper:A jQuery object that indicates the elements to be sorted
Position:An object that contains the top and left attributes indicates the position of the current element relative to the original object.
Offset:An object that contains the top and left attributes indicates the absolute position of the current element relative to the page
Item:Indicates the jQuery object being dragged.
Placeholder:Placeholder for definition
Sender:The sorting list to which the current drag element belongs. It is only applicable when two lists are moved.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> sortable component </title>
<Script language = "javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. core. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. mouse. js"> </script>
<Script type = "text/javascript" src = "js/jquery. ui. sortable. js"> </script>
<Link href = "CSS/base/jquery.ui.all.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
Body {
Text-align: left;
Margin: 0 auto;
Padding: 0;
}
# Wrap {
Margin: 10px auto 10px auto;
Padding: 5px;
Width: 300px;
Height: 250px;
Background: # fff;
Border: 5px solid #000;
Float: right;
Overflow: scroll;
}
H1 {
Color: #006;
Font-size: 24px;
Font-weight: bold;
Margin-bottom: 2px;
Text-align: left;
}
# Sortable {
List-style-type: none;
Margin: 0;
Padding: 0;
Width: 300px;
Float: left;
}
# Sortable li {
Margin: 3px;
Padding: 0.4em;
Font-size: 14px;
Height: 18px;
Text-align: left;
}
# Sortable li span {
Position: absolute;
Margin-left:-1.3em;
}
# Result {
Clear: both;
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Sortable"). sortable ({
Cursor: "move ",
Start: eventCallback,
Sort: eventCallback,
Stop: eventCallback,
Change: eventCallback,
BeforeStop: eventCallback,
Update: eventCallback,
});
Function eventCallback (e, ui ){
Var content = "Event type:" + e. type + "<br/> ";
Var message = $ ("<span>"). text (content );
$ ("# Wrap"). append (content );
Var pos = $ (". ui-widget-content"). index (ui. item) + 1;
If (e. type = "sortstart "){
Msg = "element:" + ui. item. text () + "; position before sorting:" + pos;
} Else if (e. type = "sortstop "){
Msg + = "; position after sorting:" + pos;
}
$ ("# Result"). text (msg );
}
$ ("# Sortable"). disableSelection ();
});
</Script>
</Head>
<Body>
<H1> change the train sequence and view the event trigger result <Ul id = "sortable">
<Li class = "ui-widget-content"> K22 Origin Site: Guilin-> terminal: Beijing West </li>
<Li class = "ui-widget-content"> K180 Origin Site: Zhengzhou-> terminal: Beijing West </li>
<Li class = "ui-widget-content"> K1038 Zhengzhou-> terminal: Shenzhen </li>
<Li class = "ui-widget-content"> K236 Shijiazhuang-> terminal: Shanghai </li>
<Li class = "ui-widget-content"> T182 Hankou> terminal: Harbin </li>
<Li class = "ui-widget-content"> K926 times Zhengzhou-> terminal: Harbin </li>
</Ul>
<Div id = "wrap"> </div>
<Div id = "result"> </div>
</Body>
</Html>