A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in HTML pages, using just three rows of Javascript code.
In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result:
Download this tutorial 
Live previewHTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:
Copy and paste this code in your page:
<div id="draggables">
<div>Some content Here...</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
</div>
JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the <head> tag of the page:
<script type="text/javascript" src="mootools.svn.js">
</script>
</script>
Now, copy and paste this simple unobtrusive code:
<script type="text/javascript">
window.addEvent('domready', function(){
$('#draggables div').each(function(drag){
new Drag.Move(drag);});
});
</script>$('#draggables div').each(function(drag){
new Drag.Move(drag);});
});
Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:
$('#draggables div').each(function(drag)
You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:
<div id="draggables">
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
</div>
...and CSS code could be something like this:
.drag{
border:solid 6px #DEDEDE;
background:#FFF;
width:200px;
height:150px;
...
}background:#FFF;
width:200px;
height:150px;
...
That's all! Try it and download the source code ready to use in your porject.
Download this tutorial Live preview
I am 
Nice! Simple and useful as usual. Thanks!!!
This tutorial remember to me Stixy.com :)
It's very nice.
I like the way you display code in Blogger. Can you make a tutorial on this, please?
Is this also possible with jQuery? And is it simple to save the location of the moved div for a next time?
Brilliant. You are a genious.
Very Nice! Thanks for this helpful little tutorial! But, as always, the comfort mootools gives you never ends. Why? Mootools offers you a method attached to DOM-Elements called "makeDraggable", which makes your code a little smaller and easier to read and understand.
Here is the code:
window.addEvent('domready', function(){
$$('#draggables div').makeDraggable();
});
This could indeed be accomplished in jQuery in just as many lines. On a sidenote: this script may be just 3 lines, but how big is the mootools lib?
Thanks! This is Nice :-).
Nice one Antonio.
For the final touch you can add an event that switches the z-index of the boxes on click in order to have the last clicked box on top
Great tutorial, thank you!
What if I wanted to limit the drag function only inside the current page?
It's even a little bit easier with jQuery :)
// The first line is shorthand for the document.ready call.
$(function(){
$("#draggables div").draggable();
});
jQuery Doc:
http://docs.jquery.com/UI/Draggable
If you want to get the position of an element after drag you can fire off a callback function which is an optional parameter and pull up attributes like so.
left = $("#draggables div")[0].attr("left")
top = $("#draggables div")[0].attr("top")
Very good tut !
Thanks ;)
thank you the beta half! :)
Just a question: I did it like this and I have div's with content. I would only like to make them draggable if I click on the title (like you have Settings/Contact) and not if I click in the content window (change your settings/contact me). How could I do this?
Thanks a ton!
Great tool! It saves my time.
Many thanks!
-Rulix Dacera Batistil
Great post! Helped a lot. :)
I just though you should know that at the end of your post when you typed "That's all! Try it and download the source code ready to use in your porject.", project is spelled wrong.