Jquery UI’s Sortable() Widget

Date Published: 04/05/2020 Published By: JaiSchool

You can reorder elements by dragging with the mouse in a list or a grid, using the sortable() widget. It some options, methods and events that will help you customizing the features of sortable().

Example:-

<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI Sortable Method</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

	<style>
		.select li{
			width:200px;
			list-style:none;
			border:1px solid black;
			padding:10px;
			margin:1px;
		}
	</style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
	<ul class="select">
		<li>HTML</li>
		<li>CSS</li>
		<li>JAVASCRIPT</li>
		<li>JQUERY</li>
		<li>BOOTSTRAP</li>
	</ul>


<script>
$(document).ready(function(){
	$(".select").sortable();
});
</script>
</body>
</html>

Options of Jquery UI's sortable()

PropertyValueExample
axis'x' & 'y'View
itemsSelect Element by Id or Class or TagView
cancelSelect Element by Id or Class or TagView
reverttrue & falseView
placeholderclass_nameView
dropOnEmptytrue & falseView
connectWithelement_nameView

axis Property/Option of Sortable()

<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI's axis option of Sortable() Method</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

	<style>
		.select li{
			width:200px;
			list-style:none;
			border:1px solid black;
			padding:15px;
			margin:1px;
		}
	</style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
	<ul class="select">
		<li>HTML</li>
		<li>CSS</li>
		<li>JAVASCRIPT</li>
		<li>JQUERY</li>
		<li>BOOTSTRAP</li>
	</ul>


<script>
$(document).ready(function(){
	$(".select").sortable({
		axis:"y",
	});
});
</script>
</body>
</html>

items Option

Only the elements defined in the items option will be sortable.

<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI's items option of Sortable() Method</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

	<style>
		.select li{
			width:200px;
			list-style:none;
			border:1px solid black;
			padding:15px;
			margin:1px;
		}
	</style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
	<ul class="select">
		<li>HTML</li>
		<li class="sort-item">CSS</li>
		<li class="sort-item">JAVASCRIPT</li>
		<li>JQUERY</li>
		<li class="sort">BOOTSTRAP</li>
	</ul>


<script>
$(document).ready(function(){
	$(".select").sortable({
		axis:"y",
		items:".sort-item,.sort",
	});
});
</script>
</body>
</html>

cancel Option

The elements defined in the cancel option will no longer be sortable.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's cancel option of Sortable Method</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    .select li{
      width:200px;
      list-style:none;
      border:1px solid black;
      padding:15px;
      margin:1px;
    }
  </style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
  <ul class="select">
    <li>HTML</li>
    <li class="sort-item">CSS</li>
    <li class="sort-item">JAVASCRIPT</li>
    <li>JQUERY</li>
    <li class="sort">BOOTSTRAP</li>
  </ul>


<script>
$(document).ready(function(){
  $(".select").sortable({
    axis:"y",
    cancel:".sort-item,.sort",
  });
});
</script>
</body>
</html>

revert Option

Element arranges with transition effect when you sort.

<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI Sortable Method</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

	<style>
		.select li{
			width:200px;
			list-style:none;
			border:1px solid black;
			padding:15px;
			margin:1px;
		}
	</style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
	<ul class="select">
		<li>HTML</li>
		<li class="sort-item">CSS</li>
		<li class="sort-item">JAVASCRIPT</li>
		<li>JQUERY</li>
		<li class="sort">BOOTSTRAP</li>
	</ul>


<script>
$(document).ready(function(){
	$(".select").sortable({
		revert:true,
	});
});
</script>
</body>
</html>

placeholder Option

You will see an placeholder. Use below code to see its effect.

<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI's placeholder option of Sortable() Method</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

	<style>
		*{box-sizing:border-box;}
		.select li{
			width:200px;
			list-style:none;
			border:1px solid black;
			padding:15px;
			margin:1px;
		}
		.design-p{
			width:200px;
			height:50px;
			background:red;
			padding:15px !important;
		}
	</style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
	<ul class="select">
		<li>HTML</li>
		<li class="sort-item">CSS</li>
		<li class="sort-item">JAVASCRIPT</li>
		<li>JQUERY</li>
		<li class="sort">BOOTSTRAP</li>
	</ul>


<script>
$(document).ready(function(){
	$(".select").sortable({
		placeholder:"design-p",
	});
});
</script>
</body>
</html>

connectWith Option

<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI Sortable Method</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

	<style>
		*{box-sizing:border-box;}
		.select li,.select-2 li{
			width:200px;
			list-style:none;
			border:1px solid black;
			padding:15px;
			margin:1px;
		}
		.select{float:left;}
		.select-2{float:right;}
.design-p{
			width:200px;
			height:50px;
			background:red;
			padding:15px !important;
		}
	</style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
	<ul class="select">
		<li>HTML</li>
		<li>CSS</li>
		<li>JAVASCRIPT</li>
		<li>JQUERY</li>
		<li>BOOTSTRAP</li>
	</ul>

	<ul class="select-2">
		<li>mysql</li>
		<li>php</li>
		<li>ajax</li>
		<li>wordpress</li>
		<li>angular</li>
	</ul>


<script>
$(document).ready(function(){
	$(".select,.select-2").sortable({
placeholder:"design-p",
		connectWith:".select,.select-2",
	});
});
</script>
</body>
</html>

dropOnEmpty Option

When it has a value true then you can also add the sort-able element again after emptying it. The connectWith option should be used.

Set min-width and min-height in the parent element because when you sort all elements from .select to .select-2 then the one will be completely empty. Now to add again sortable elements from .select-2 to .select it needs to have min-width and min-height to drop on it from .select-2 (Width and height become 0px when you empty it.)

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI's connectWith option of sortable() Method</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <style>
    *{box-sizing:border-box;}
    .select li,.select-2 li{
      width:200px;
      list-style:none;
      border:1px solid black;
      padding:15px;
      margin:1px;
    }
    .select{float:left;}
    .select-2{float:right;}
    .select,.select-2{
      min-width:200px;
      min-height:50px;
    }
    
    .design-p{
      width:200px;
      height:50px;
      background:red;
      padding:15px !important;
    }
  </style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
  <ul class="select">
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>JQUERY</li>
    <li>BOOTSTRAP</li>
  </ul>

  <ul class="select-2">
    <li>mysql</li>
    <li>php</li>
    <li>ajax</li>
    <li>wordpress</li>
    <li>angular</li>
  </ul>


<script>
$(document).ready(function(){
  $(".select,.select-2").sortable({
    placeholder:"design-p",
    dropOnEmpty:true,
    connectWith:".select,.select-2",
  });
});
</script>
</body>
</html>

When dropOnEmpty is set to false, then you can't add elements again in it.

<!DOCTYPE html>
<html>
<head>
	<title>Jquery UI Sortable Method</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

	<style>
		*{box-sizing:border-box;}
		.select li,.select-2 li{
			width:200px;
			list-style:none;
			border:1px solid black;
			padding:15px;
			margin:1px;
		}
		.select{
			min-width:200px;
			min-height:50px;
			float:left;
		}
		.select-2{
			min-width:200px;
			min-height:50px;
			float:right;
		}
		.design-p{
			width:200px;
			height:50px;
			background:red;
			padding:15px !important;
		}
	</style>
</head>
<body>
<h1 align="center">Jquery UI Sortable Method</h1><hr>
	<ul class="select">
		<li>HTML</li>
		<li>CSS</li>
		<li>JAVASCRIPT</li>
		<li>JQUERY</li>
		<li>BOOTSTRAP</li>
	</ul>

	<ul class="select-2">
		<li>mysql</li>
		<li>php</li>
		<li>ajax</li>
		<li>wordpress</li>
		<li>angular</li>
	</ul>


<script>
$(document).ready(function(){
	$(".select,.select-2").sortable({
		connectWith:"ul",
		placeholder:"design-p",
		dropOnEmpty:false,
	});
});
</script>
</body>
</html>

Publish A Comment

Leave a Reply

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