Drag and Drop reordering feature in Lists or tables using Jquery


For the lazy people out there drag and drop reordering of the things came as an awesome gift, however for webmasters it became a headache, not anymore, In this simple tutorial we share How you can do it easily anywhere and to any element of your webpage.

The drag and drop functionality is cool in the lazy word where nobody wants to more than just enough. Here I'll show you how you can implement this drag and drop functionality using simple html and jQuery. You can do this almost on every type of elements which you can make group of.

For making it simple I am taking example of the html lists element. I'll use simple css selector instead of classes or id,s to make it clear.

Let's start with the basics and make our head part first. So What you need to get started?

<ul>
  <li>html</li>
  <li>jQuery</li>
  <li>a little bit of thinking</li>
</ul>

Now you are ready to go. first lets make the head part of our demo:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<linkrel="stylesheet"type="text/css"href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Before moving on let's see what we have here. I have just included the jQuery file, I haven't downloaded it but used the url provided by the jQuery for easy integration. but you can download it here

And the jQuery UI(user interface), which allows you to make cool stuff without much messing around with the core code. you can get it here

ready to go? now let's complete our code. Now I am creating the body of our html, here I'll use the very known "ul" tag.

<ul>
	<li>hello</li>
	<li>world</li>
	<li>foo</li>
	<li>bar</li>
</ul>

Of course you can add css to make it more good looking, I'll give it simple taste of css, just to highlight the effects when you see it happening. And the code goes inside the head part.

ul{
	list-style-type:none;
}

li{
	margin:4px 4px;
	padding:2px 2px;
	background-color:#dddddd;
	color:#000;
}

And finally let's blend the magic of jQuery with the html to see the awesome effect. following code goes in the head part below out jQuery includes.

<script>
$(document).ready(function(){
	$("ul").sortable({update:function(){
		alert("updated");
}});
	$("ul").disableselection();
});
</script>

What we've done here is, When document is ready, select the "ul" and make it sortable, so that the element inside can be moved and dragged around to change their ordering. usually the sorting is as simple like

$("ul").sortable();

the code above is sufficiant enough to make the list sortable, but I have shown a little more than that.

$("ul").sortable({update:function(){
//do something when the drag and drop is performed.
}});

you can do anything here, like calling your ajax or updating the database like things.

so here is our complete code, but you can copy it but I suggest, try it yourself, and don't forget to leave your comments.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<linkrel="stylesheet"type="text/css"href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
	$("ul").sortable({update:function(){
		alert("updated");
}});
	$("ul").disableselection();
});
</script>
<style>
ul{
	list-style-type:none;
}

li{
	margin:4px 4px;
	padding:2px 2px;
	background-color:#dddddd;
	color:#000;
}
</style>
</head>
<body>
<ul>
	<li>hello</li>
	<li>world</li>
	<li>foo</li>
	<li>bar</li>
</ul>
</body>
</html>