Abhi's Weblog » Draggable DIV http://abhinavsingh.com/blog PHP, Memcached, XMPP and Web Development Sat, 04 Sep 2010 10:58:12 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 iGoogle Portal Implementation: How to do it? http://abhinavsingh.com/blog/2008/06/igoogle-portal-implementation-how-to-do-it/ http://abhinavsingh.com/blog/2008/06/igoogle-portal-implementation-how-to-do-it/#comments Mon, 30 Jun 2008 17:44:18 +0000 Abhinav Singh http://abhinavsingh.com/blog/2008/06/igoogle-portal-implementation-how-to-do-it/

After developing the draggable div application the other day, I was itched to implement the whole iGoogle portal. Probably the drive came when a few of you asked me “These draggable divs are just like iGoogle”, so I thought why not to give a shot at it.

Here is what I was able to come up with while sitting idle at the office. I have shown 3 tabs for making it look more of a realistic demo. However only the news tab is operational as of now. Feel free to drag and drop any of the news box to any corner of the page and rest of the boxes will make place for it. :)

Find the implementation of this application here.

Basically it proved out to be a derivative of the previous application i.e. draggable div. However this one is a bit more modular, will easily fit into any changes made to the tabs and tab names or what ever.

Feel free to post a comment or two at the blog here.

Finally make your portals like iGoogle :P

]]> http://abhinavsingh.com/blog/2008/06/igoogle-portal-implementation-how-to-do-it/feed/ 11 Draggable DIVs : How to make one? http://abhinavsingh.com/blog/2008/06/draggable-divs-how-to-make-one/ http://abhinavsingh.com/blog/2008/06/draggable-divs-how-to-make-one/#comments Sun, 29 Jun 2008 14:59:19 +0000 Abhinav Singh http://abhinavsingh.com/blog/2008/06/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!

]]> http://abhinavsingh.com/blog/2008/06/draggable-divs-how-to-make-one/feed/ 9