Introduction

The introduction of iPhone has given wings for the mobile phone's user interfaces to take off to new peaks. Multi-touch (Pinch), finger based operation, sliding, etc. have undoubtedly created a new era in the human-computer interaction. It is a revolutionary thought and many are inspired by these magical ideas. After Apple introduced these techniques to the public at a mass level, every phone maker is trying to 'imitate' many of these techniques in their products too. So I thought 'Why not the web user interface too grab the iPhone ideas?'. That's the enthusiasm that led me to write this project. Though it is a simple and stupid idea, it is really worth considering as it allows the user to control the way a web page is displayed.

What Can We Do With This

There are numerous things that can be done with this idea. But following are just a few tips:

Selling Products: A site like eBay or Amazon can provide such functionality for their customers to put their product in a showcase and let the user arrange the order in which they are displayed.

Portal Sites: Portal sites such as iGoogle or Netvibes can arrange their widgets like the icons in iPhone.

What's the Magic

Recently I came across the wonderful tools by developers at Yahoo and I fell in love with those tools after spending just a few minutes with them. They are so amazing and extremely powerful where I found that they have immense potential within. Above all they are completely free and 100% open source. Just visit http://developer.yahoo.com/ for further details and downloads. If you can devote a few minutes with these amazing YUI tools, I am sure every GUI fantasies in an iPhone can be reproduced in Web without a fuzz. It is truly astonishing. So here we go.

Working with YUI is simple. There are tons of sample code and millions of documentation. To start with, we need to first link the YUI script files in our HTML. We can either download the *.js files to our local store or we can link to Yahoo store itself. In this project, I am linking the *.js files directly from Yahoo's store.

Note: The id of the dragable object and id of the placeholders. The suffix of the id is a sequential number which I have identify which DD is in which DDTarget.Having the basic thing ready, now I can write the code to do the animation when the user drags an item.

When the window is loaded (i.e. on window.onload event), the place-holders are arranged in a tabular manner which is done by the great CSS. Then the dragable items are docked in the place-holders according to the sequential order of the id suffix.

Now the interesting part begins. Each of the place-holders is registered as the 'Drop-Target' (YAHOO.util.DDTarget) and each product-item is registered as 'DragDrop-Item' (YAHOO.util.DD).

//Register as Drop-Target Item
new YAHOO.util.DDTarget(document.getElementById('ItemBase-X'));
//Register as Drag-Drop Item
new YAHOO.util.DD(document.getElementById('ProductItem-X'));

Now it's time to handle the events. When a DD item enters (event: onDragEnter) into a DDTarget items boundary, move the existing DD item inside the DDTarget to the adjacent DDTarget and move DD into adjacent repeatedly until the current DD item's original DDTarget is reached. I know it might sound bit tricky. But it's very simple.

Similarly, I've written the code to animate when the Item is dropped into a DDTarget (event:onDragDrop) and when it is dropped outside a valid DDTarget (event:onInvalidDrop). In fact the coding is so simple and anyone can understand. Thanks to the YUI tools making life easy by giving us such nice libraries.

Points of Interest

Well this is just a static web page with some hardcoded items in it. But I am currently developing a web site which will be marketed to many financial advisors where they can customize and arrange their financial products on their home page. The customers or the end-users of their web site can further make arrangements according to their priorities. I presume, it would be a ground breaking web site and would attract many funky web lovers. Once the site goes live, I will put the URL here, so watch this space.

How to Re-use this Code

Re-using this code is easy, but I am afraid I cannot take any responsibility for any outcome of this code. The following needs to be considered in order to make it work for your circumstances.

Any dragable item should have the class name set to ProductItem

There must be an empty place-holder defined for each dragable object with the class name set to ItemBase

The dragable object IDs should be set to 'ProductItem-X', where 'X' is the sequence number

Each ItemBase defined should have the ID in the former 'ItemBase-X' where 'X' is the sequence number

Share

About the Author

Having more than 10 years experience in software development and currently working for eHips Ltd in Oxford, UK. Expert in C# and VB.NET. Also Expert in technologies such as GDI+, ADO.NET, XML, XSD etc. Started the career as a VB6.0 developer and moved on to .NET with its beta release. Experience includes real-time system development, distributed systems, Work flow systems, control system development and web 2.0 systems.

Comments and Discussions

I find this project really interesting.Could you please gimme a clue how to make 2 or 3 blocks of icons and having position restriction for each's block icons? for istance the icons of the 2 block shouldnt be able to mixup with the block's 1 or 2.

I am sorry. I don't think I can put a bigger image than this. This forum restricts the size to maximum of 400px width. You can download the source code and see what it does. It is basically about animating menus while arranging them.