Jquery Sortable Example - Jquery

How to use sortable ui in jquery?

Snippet Code

Rate this page :
  [ 0 votes]

The sortable in jquery ui allows you to rearrange the elements into a list or grid view using mouse. Sorting depends upon the operation string passed on the first parameter. The jquery code using sortable method is given below.

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #sortitem { list-style-type: none; margin: 0; padding: 0; width: 10%; } #sortitem li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 17px; height: 16px; } .highlight { border: 1px solid red; font-weight: bold; font-size: 45px; background-color: #333333; } .default { background: pink; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#sortitem" ).sortable({ placeholder: "highlight" }); }); </script> </head> <body> <ul id="sortitem"> <li class="default">Item 1</li> <li class="default">Item 2</li> <li class="default">Item 3</li> <li class="default">Item 4</li> <li class="default">Item 5</li> <li class="default">Item 6</li> <li class="default">Item 7</li> </ul> </body>


Ask Questions

Ask Question