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. :)
Below 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.
|
Drag Handle 1
This is a test div. Press the mouse on the top handler and then drag me to any place you feel like.
If you put me below the lower div, we will interchange our positions.
Drag Handle 2
I am lower but that doesn't make me inferior. Just drag me up and see the result.
|
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.
Also drop in a comment or two at the blog here.
This work is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.
|
|