This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, February 8, 2009

Ultra small code to drag everything in HTML pages

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 preview



HTML 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>


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>

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>

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>

...and CSS code could be something like this:

.drag{
border:solid 6px #DEDEDE;
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

blog comments powered by Disqus
Anonymous said...

Nice! Simple and useful as usual. Thanks!!!

Nikopolidis said...

This tutorial remember to me Stixy.com :)

Tuan Anh said...

It's very nice.

I like the way you display code in Blogger. Can you make a tutorial on this, please?

Edwin said...

Is this also possible with jQuery? And is it simple to save the location of the moved div for a next time?

Dana Ross said...

Brilliant. You are a genious.

Thomas Dullnig said...

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();
});

Anonymous said...

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?

ChristianoErwen said...

Thanks! This is Nice :-).

Luca said...

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

Pablo said...

Great tutorial, thank you!

Fabryz said...

What if I wanted to limit the drag function only inside the current page?

the beta half said...

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")

Detruk said...

Very good tut !
Thanks ;)

Anonymous said...

thank you the beta half! :)

nasal said...

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!

Anonymous said...

Great tool! It saves my time.

Many thanks!

-Rulix Dacera Batistil

Anonymous said...

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.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News