Draggable DIVs : How to make one?

Draggable DIVs : How to make one?

You all must have seen a similar thing on your iGoogle home page. Further for years this application is an integral part of Yahoo User Interface Library i.e. YUI. I tried to tweak into the iGoogle and YUI implementation of the draggable div implementation, but somehow I found them rather too complex to understand. Hence I thought of better write a short application and see if I can do the same magic. 🙂

Here is what I came up with. Still not modular enough, I coded everything as per the requirements for this demo. Probably in future I should be able to come up with a modular stuff to let others use the same.

Click for the demo here.

Basically it proved out to be much simpler as it looked. However if you have observed and used YUI, they have a concept of proxy element for the same implementation. Basically what proxy allows you is, while you are dragging the DIV, it doesn’t actually moves the original DIV. However it simply creates a proxy DIV, which will be visibily move when we try to move the DIV.

Feel free to post a comment or two here. 🙂

Happy dragging!


  1. That links just doesn’t open 🙁

    Anyways I am sure there will be infinite number of javascript API’s for this supposedly. However I wanted to try myself, hence came up with this.

    Also this thing was introduced by YUI and even iGoogle uses YUI for the implementation on there portal. However if you go ahead and use YUI for this, you will find that for this simple implementation you will have to include 3 javascript files while you can achieve this with a a total of 3 javascript functions (which I have right now) 🙂

  2. really strange for me it says problem while loading the page, please try again. I even tried going to it with google search. Anyways I will surely have a look at it later on. But really its wierd.

  3. Pingback: Bookmarks about Divs

Leave a Reply