JqueryUI Sortable Example

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

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

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

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

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

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

Sortable Widget Options

Sortable Widget Methods

Sortable Widget Events

About Krishna Srinivasan