Home Ajax Jquery jQuery UI Interaction : Sortable
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

jQuery UI Interaction : Sortable

Advertisement
This page discusses - jQuery UI Interaction : Sortable

jQuery UI Interaction : Sortable

     

jQuery UI Interaction : Sortable

Using jQuery sortable plug-in , you can sort selected element by mouse drag.

Given below the necessary code line, which needs to included for this effect :

$("#element").sortable();
For options, events ,method and theming click here

EXAMPLE :

sortable.html
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui
/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery
/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui
/1.8/jquery-ui.min.js"></script>

<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script type="text/javascript">
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
</script>
</head>
<body>
<div class="demo">

<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div>
</body>
</html>

Output :

You can drag element from mouse and place it anywhere in series  :

Download Source Code

Click here to see demo

Learn from experts! Attend jQuery Training classes.

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Ask Questions?    Discuss: jQuery UI Interaction : Sortable  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Manoranjan
September 28, 2012
WFJFIHWggRvCo

You mentioned other lginogg tools for R ? What are they? I didn't know there are other lginogg tools for R. log4r is a pioneer as far as I know. I would appreciate to know other lginogg packages. Apologize if I mis-understand your words, and thanks a lot for your great work! I found your package and was using it before you upload to CRAN. It works very well for me so far.
DMCA.com