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!

  • Sowmya

    superb…keep your inquisitive mind @ work always 🙂

  • thankooooooo 🙂

  • manish

    hi,

    hey i know a bit about this. if you just want draggable div’s. i am sure many of javascript libraries like scriptaclous, ext, mootools, etc etc offer it. But if your looking for something like igoogle or myyahoo look at this blog

    http://blog.xilinus.com/2007/8/26/prototype-portal-class

  • 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) 🙂

  • manish

    dont know.. this open when i click it.. anyways search in google “prototype portal class” . will lead you to this page

  • 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.

  • tibri

    cool stuff bhai ! keep it up

  • Thanks tibri bhai….check the other one too 🙂
    The igoogle portal implementation 🙂

  • Pingback: Bookmarks about Divs()

  • Sio

    403 Forbidden

  • Artur

    403 error! 🙁