Drag & Drop

1Drag & Drop functionality is one of the coolest innovations in the Web 2.0 world. Google allows you to customize the layout of your homepage or analytics reports with drag & drop, some advanced ASP.NET ajax projects show similar functionality but I've never seen the code behind and how easy it could be if a language sets out to support it so well as Adobe has done with Flex.

Here's the idea with flex, because all data is contained in some kind of container (a datagrid, tilelist, etc.) the data that is in one container can be easily transported to another with the click and slide of the mouse. All a developer needs to do is set the container to drag enabled and/or drop enabled and all of the sudden you can move around objects from one container to another. These objects could be a picture in one container, a simple name in another, or a detailed list as can be found in a datagrid row. Flex even allows you to write custom event functions to customize the display of the objects in the different containers as well as record the move. For larger projects Flex also allows a dragMultiple variable to be set to true to allow quick organizing or moving of data from one container to another.

While I know Drag & Drop should be used in a limited fashion because it is a little bit heavy on the user interaction required, but in those few uses that added functionality can be a real bonus. I see drag & drop best used in these kinds of scenarios:

• Organizing pictures, or other small data items
• Organizing the order of display of pictures and any other data or display object
• Providing an extremely simple way for people to trash items or mark completed (like a visual to-do list of post it notes)
• Moving items from a stores inventory into shopping carts or wish lists
• Itemizing the separate billing of products and services when someone is splitting the bill
• Adding components onto cars, bikes, or any other custom assembled product
• Dragging clothes onto a digital model to see color/style coordination

I plan on using Drag & Drop functionality in a couple of projects soon, I want people to see that this kind of visual functionality and interaction can be found on more than just desktop apps and operating systems.


A great couple of examples of cool Drag and Drop proof of concept applications can be found on the quietlyscheming.com blog, here they are

Image Sorting Test
Dodgeball Team Roster Organizer
Alphabet Tile Game