• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JqueryUI Sortable Example

November 8, 2014 //  by Krishna Srinivasan//  Leave a Comment

The sortable is a flexible, sorting plugin for jQueryUI which allows rearranging the elements into a meaningful order so that we can analyze it more effectively. It enables sorting of elements by using drag and drop functionality to place the new element within the list and other elements will adjust to fit. The sortable event also enables, sorting of the elements vertically or horizontally using the mouse in a list.

also read:

  • JQuery Keydown, Keypress and Keyup
  • JQUery Setting Drop Down Value
  • JQuery prepend() and prependTo()

The sortable method can be used in the following forms:

  • $(selector, context). sortable (options)
  • $(selector, context). sortable (“actions”, [params])

The following example demonstrates simple sortable technique:

<!DOCTYPE html>
<head>
<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 type="text/css">
	#sortMe
	{
	    list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	.myList
        {
		background: gray;
		border: 1px solid cyan;
	 }
</style>
<script>
   $(function(){
      $("#sortMe").sortable();
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Simple Sorting Example</h2>
   <ul id="sortMe">
      <li class="myList">India</li>
      <li class="myList">Srilanka</li>
      <li class="myList">Australia</li>
      <li class="myList">South Africa</li>
      <li class="myList">China</li>
      <li class="myList">Japan</li>
      <li class="myList">Italy</li>
      <li class="myList">France</li>
      <li class="myList">Canada</li>
      <li class="myList">Brazil</li>
   </ul>
</body>
</html>
  • The above script makes use of sortable() method to reorder the elements in a list by using the ID selector “#sortMe.
  • The elements are defined within unordered list with class “.myList” defined within the li tag. The class uses different CSS styles to display the elements more effectively on the webpage.

Run JQueryUI Simple Sortable Demo

JQueryUI Simple Sortable Example

Sortable Widget Options

The sortable method contains following options:

Option Description Default Value
appendTo It appends the specified element that moves with the mouse during the drag. parent
axis It defines the axis which the dragged elements moves on the values such as horizontal or vertical axis. false
cancel It is used to cancel the sorting operation on the specified element. input, textarea, button, select, option
connectWith It connects the one list with the other list for user interaction and it is also known as one-way relationship. false
containment It sorts the specified element within bounds of the region. false
cursor It specifies the cursor when an element moves. auto
cursorAt It specifies the offset to the mouse pointer. false
delay It specifies the delay time in milliseconds when the movement of mouse is taken into account . 0
disabled It disables the sorting of elements when it is set to true i.e. it stops sorting operation. false
distance It determines the displacement, the mouse must be moved before the sorting starts in the form of pixels. 1
dropOnEmpty The elements can’t be dropped on empty connect sortable if it is set to false. true
forceHelperSize It tells the helper to have a size, when it is set to true. false
forcePlaceholderSize When an element is moved, it defines the size of the placeholder when it is set to true. false
grid It sorts the elements to grid system with x and y pixels in the form of [x,y]. false
handle The handle that start the sorting operation. original
opacity It provides opacity of the element when sorting. false
revert It reverts the element back to its original position after completion of sorting. false
scroll It enables the scrolling functionality and it scrolls the element, when it is coming to an edge. true
scrollSensitivity It defines the scrolling functionality indicating how many pixels the mouse must exit the visible area to start scrolling. 20
scrollSpeed It displays the scrolling speed. 20
Tolerance It defines whether the element is being moved is hovering or not on the another element. intersect
zIndex It initialize the Z-index for the helper while being sorted. 1000

The following example demonstrates usage of containment option:

<!DOCTYPE html>
<head>
<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 type="text/css">
	.mylist {
		background-color: orange;
		text-align: center;
		border: 2px solid green;
	}
	.myelements {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.myelements li {
		float: left;
		margin: 2px;
		padding: 2px;
		width: 60px;
		height: 60px;
	}
</style>
<script>
$(function () {
        $("#element1").sortable({
                containment: "#container"
        });
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Using Containment Option</h2>
<div id="container" style="float:left;width:300px;border:1px solid red;height:250px">
    <ul id="element1" class="myelements">
        <li class="mylist">A</li>
        <li class="mylist">B</li>
        <li class="mylist">C</li>
        <li class="mylist">D</li>
        <li class="mylist">E</li>
        <li class="mylist">F</li>
        <li class="mylist">G</li>
        <li class="mylist">H</li>
        <li class="mylist">I</li>
        <li class="mylist">J</li>
        <li class="mylist">K</li>
        <li class="mylist">L</li>
    </ul>
</div>
</body>
</html>
  • The above script uses containment option which indicates an element within which the displacement takes place.
  • The option uses ID selector “#element1” to make elements sortable. All the elements are displayed within the div element by using ID selector “#container” and containment option uses this ID selector to display the result by using CSS styles.

Run JQueryUI Sortable Options Demo

JQueryUI Sortable Options Example

The following example shows usage of connectWith and dropOnEmpty options:

<!DOCTYPE html>
<head>
<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 type="text/css">
	     #mysort1, #mysort2,#mysort3 {
	          list-style-type: none;
	          margin: 0;
	          padding: 0;
	          width: 20%;
	          float:left
	      }
	      #mysort1 li, #mysort2 li, #mysort3 li {
	          margin: 2px;
	          padding: 0.4em;
			  padding-left: 3em;
			  font-size: 20px;
			  height: 20px;
		  }
	      .mylist {
	          background-color: orange;
	          border: 2px solid green;
	      }
	   </style>
	   <script>
	      $(function() {
	         $( "#mysort1, #mysort2" ).sortable({
	            connectWith: "#mysort1, #mysort2"
	         });
	         $( "#mysort3").sortable({
	            connectWith: "#mysort2",
	            dropOnEmpty: false
	         });
	      });
	   </script>
	<title>JQueryUI Example</title>
	</head>
	<body>
	<h2>Using connectWith and dropOnEmpty Options</h2>
	   <ul id="mysort1">
	   <h3>Table 1</h3>
	      <li class="mylist">A</li>
	      <li class="mylist">B</li>
	      <li class="mylist">C</li>
	      <li class="mylist">D</li>
	   </ul>
	   <ul id="mysort2">
	   <h3>Table 2</h3>
	      <li class="mylist">E</li>
	      <li class="mylist">F</li>
	      <li class="mylist">G</li>
	      <li class="mylist">H</li>
	   </ul>
	   <ul id="mysort3">
	   <h3>Table 3</h3>
	      <li class="mylist">I</li>
	      <li class="mylist">J</li>
	      <li class="mylist">K</li>
	      <li class="mylist">L</li>
	   </ul>
	</body>
</html>
  • The script makes use of sortable options such as connectWith and dropOnEmpty.
  • The connectWith option identifies another sortable element which allows elements from the one list to be moved to other list.
  • In the script we could see, Table 1 and Table 2 are connecting each other by using the line connectWith: “#mysort1, #mysort2” . We could move elements from Table1 to Table2 only as mentioned in the previous line.
  • The dropOnEmpty option cannot drop the elements on an empty connect sortable, because it is set to false in the script. The Table3 elements are can’t be moved to Table1, because we are connecting Table3 with Table2 as shown in the script.

Run JQueryUI Sortable Options Demo1

JQueryUI Sortable Options Example1

The below example demonstrates usage of delay and distance options:

<!DOCTYPE html>
<head>
<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 type="text/css">
	#selectMe1,#selectMe2{
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100px;
	}
	.myList {
		background: gray;
		border: 1px solid cyan;
		color:orange;
    }
</style>
<script>
   $(function(){
      $("#selectMe1").sortable({
         delay: 500
      });
      $("#selectMe2").sortable({
	     distance:30
	  });
   });
</script>
</head>
<title>JQueryUI Example</title>
<body>
   <h2>Sorts after Delay of 500ms </h2>
   <ul id="selectMe1">
      <li class="myList">India</li>
      <li class="myList">Srilanka</li>
      <li class="myList">Australia</li>
      <li class="myList">South Africa</li>
   </ul>
   <h2>Sorts after the distance of 30px</h2>
   <ul id="selectMe2">
      <li class="myList">China</li>
      <li class="myList">Japan</li>
      <li class="myList">Italy</li>
      <li class="myList">France</li>
      <li class="myList">Canada</li>
      <li class="myList">Brazil</li>
   </ul>
</body>
</html>
  • The above script uses options such as delay and distance .
  • The delay option defines the delay in milliseconds after which the first movement of the mouse is taken into account. In the script we have defined as “delay: 500”, meaning that, we can able to sort the elements after 500milliseconds.
  • The distance option defines the number of pixels that the mouse must be moved before the sorting starts. In the script we have used “distance: 30”, meaning that, it sorts the elements after the distance of 30px.

Run JQueryUI Sortable Options Demo2

JQueryUI Sortable Options Example2

Sortable Widget Methods

The following table shows some of the methods which are used with sortable widget:

Method Description
destroy() It removes the sortability functionality .
cancel() It cancels the current sortable functionality .
disable() This method disables the sortable operation.
enable() This method enables the sortable operation.
options() It returns the options property. It sets sortable operation with specified option name.
refresh It refreshes the position and size of the sortable elements and it does not accept any arguments.
toArray It returns the array of item id’s into the sorted order.
serialize It defines serialized query string into a form submittable string.
widget() It defines sortable element with jQuery object.

The following example demonstrates usage of enable and destroy methods:

<!DOCTYPE html>
<head>
<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 type="text/css">
	#mysort2 li, #mysort3 li {
			  margin: 2px;
			  padding: 0.4em;
			  padding-left: 3em;
			  font-size: 20px;
			  height: 20px;
	  }
	 #mysort2,#mysort3 {
			  list-style-type: none;
			  margin: 0;
			  padding: 0;
			  width: 20%;
			  float:left
	  }
	  .mylist {
			  background-color: orange;
			  border: 2px solid green;
	  }
</style>
<script type="text/javascript">
   $(function(){
	   $("#mysort2").sortable();
	   $("#mysort2").sortable('enable');
	   $("#mysort3").sortable();
	   $("#mysort3").sortable('destroy');
   });
</script>
</head>
<body>
<h2>Using Enable and Destroy Methods</h2>
	<ul id="mysort2">
	<h3>Enabled Sorting</h3>
		  <li class="mylist">E</li>
		  <li class="mylist">F</li>
		  <li class="mylist">G</li>
		  <li class="mylist">H</li>
	</ul>
	<ul id="mysort3">
	<h3>Destroyed Sorting</h3>
		  <li class="mylist">I</li>
		  <li class="mylist">J</li>
		  <li class="mylist">K</li>
		  <li class="mylist">L</li>
    </ul>
</body>
</html>
  • The script makes use of sortable methods such as enable and destroy.
  • The enable method enable the sortability functionality on sortable elements in the list or set.
  • The destroy method removes the sortability functionality completely. It will return the element back to its pre-init state.

Run JQueryUI Sortable Methods Demo

JQueryUI Sortable Methods Example

Sortable Widget Events

The following table shows events which are used with sortable widget:

Event Description
activate(event, ui) This event fires when the sorting operation starts on the acceptable elements.
create(event, ui) It fires when a sortable element is created.
deactivate(event, ui) It fires when a draggable element stops sorting.
change(event, ui) It fires when the sorted element changes the position.
recieve(event, ui) It fires when a sort item receives element from the other list.
out(event, ui) It fires when sortable element is moved out of the sorting operation.
over(event, ui) It fires when sortable element is sorted into the sortable list.
start(event, ui) It fires when sortable operation starts.
stop(event, ui) It fires when sortable operation ends.
sort(event, ui) It fires during sort operation.
update(event, ui) It fires when user stops sorting operation and the position of the element has been changed.

The following example demonstrates usage of start and stop events:

<!DOCTYPE html>
<head>
<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 type="text/css">
	<style type="text/css">
	.mylist {
			background-color: orange;
			text-align: center;
			border: 2px solid green;
		}
		#element1 {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		#element1 li {
			float: left;
			margin: 2px;
			padding: 2px;
			width: 60px;
			height: 60px;
	}

	.highlight {
	    border: 2px solid red;
	    font-weight: bold;
	    font-size: 40px;
	    background-color: lightblue;
	}
	</style>
	<script>
	$(function () {
	        $("#element1").sortable({
	                start: function (event, ui) {
	                        ui.item.toggleClass("highlight");
	                },
	                stop: function (event, ui) {
	                        ui.item.toggleClass("highlight");
	                }
	        });
	});
	</script>
<div id="container" style="float:left;width:300px;border:1px solid red;height:250px">
	   <ul id="element1">
			<li class="mylist">A</li>
			<li class="mylist">B</li>
			<li class="mylist">C</li>
			<li class="mylist">D</li>
			<li class="mylist">E</li>
			<li class="mylist">F</li>
			<li class="mylist">G</li>
			<li class="mylist">H</li>
			<li class="mylist">I</li>
			<li class="mylist">J</li>
			<li class="mylist">K</li>
			<li class="mylist">L</li>
	  </ul>
</div>
</body>
</html>
  • The script uses sortable events called start and stop.
  • The start event triggers when a sort operation starts.
  • The stop event occurs when a sort operation ends.
  • We have used class called highlight which toggles when we click on the element and element will be display with red color border and light blue background color.

Run JQueryUI Sortable Events Demo

JQueryUI Sortable Events Example

Category: jQueryTag: jQuery UI

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « TreeMap Class Example
Next Post: JQueryUI Resizable Widget »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact