Home > Developer > JavaScript
Code 1 preview:
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> Best jquery list: drag and arrange custom drag layers </title>
<Meta name = "description" content = "jquery list module drag layer. When you click or drag a list, you can customize the drag and drop list module to the corresponding position. Supports the drag layer of the callback function. "/>
<Script type = "text/javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. dragsort-0.4.min.js"> </script>
<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>
</Head>
<Body>
<Div class = "demo">
<H1> jQuery list dragging
<H2> A simple list:
<Ul class = "dragsort-ver">
<Li> you guess </li>
<Li> do not guess </li>
<Li> You Don't guess. </li>
<Li> <input type = "checkbox" name = "intro_fields []" value = "Guess"/> guess </li>
<Li> do not guess </li>
<Li> do not guess or not </li>
<Li> do not guess or guess </li>
</Ul>
<Br/>
<Script type = "text/javascript">
$ ("Ul: first"). dragsort ();
</Script>
<H2> drag and drop two groups of lists: (unlimited group drag and drop)
<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 and save it here to retrieve the backhaul requests 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> </li> ",
ScrollSpeed: 5
});
Function saveOrder (){
Var data = $ ("# list1 li"). map (function (){
Return
Certificate (this).children().html ();
}). Get ();
$ ("Input [name = list1SortOrder]"). val (data. join ("| "));
};
</Script>
<Div style = "clear: both;"> </div>
<H2> Usage $ ("Ul "). dragsort ({dragSelector: "li", dragEnd: function () {}, dragBetween: false, placeHolderTemplate: "<li ></li>"}); <br/>
<Br/>
<Dl class = "dragfunction">
<Dt> dragSelector </dt>
<Dd> the drag handle of the list items of the elements in the CSS selector. The default value is "li ". </Dd>
<Dt> dragSelectorExclude </dt>
<Dd> dragSelector in the element of the CSS selector does not trigger dragsort. The default value is "input, textarea, a [href]". </Dd>
<Dt> dragEnd </dt>
<Dd> the callback function to be called after the drag operation is completed. </dd>
<Dt> dragBetween </dt>
<Dd> set to "true". If you want to enable multiple groups of lists, drag the selected list. The default value is false. </Dd>
<Dt> placeHolderTemplate </dt>
<Dd> drag the HTML part of the list. The default value is "<li> </li>". </dd>
<Dt> scrollContainer </dt>
<Dd> the CSS selector element is used as a rolling container. For example, the overflow div is set to automatic. The default value is "window". </dd>
<Dt> scrollSpeed </dt>
<Dd> A number represents the speed. When a page is dragged, it will scroll out of the container. The higher value of use is the speed and the lower value is slow. If it is set to "0", scroll is disabled. The default value is "5". </dd>
</Dl>
</Div>
</Body>
</Html>
Code 2 preview:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> jQuery UI sortable () implements drag sorting </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Script src = "http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"> </script>
<Script src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</Head>
<Body>
<Script>
$ (Function (){
$ (". Sortable"). sortable ({
Cursor: "move ",
Items: "li", // only li can be dragged
Opacity: 0.6, // when dragging, the transparency is 0.6
Revert: true, // Add an animation when releasing
Update: function (event, ui) {// After updating the sorting
Alert ($ (this). sortable ("toArray "));
}
});
});
</Script>
<Ul class = "sortable">
<Li class = "ui-state-default" id = "1"> item 1st </li>
<Li class = "ui-state-default" id = "2"> item 2nd </li>
<Li class = "ui-state-default" id = "3"> item 3rd </li>
</Ul>
</Body>
</Html>
Source code download
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
