Drag and drop behaviour for the Layout Customizer

Colin Clark colin.clark at utoronto.ca
Wed Apr 16 22:33:05 UTC 2008

Hello designers,

We've been doing a lot of review and testing of the Layout Customizer  
component in preparation for the Fluid Infusion 0.3 release. One of  
the things we've been thinking about is the behaviour of drag and drop  
in this component.

A couple of months ago, Gary and Shaw-Han did a great job of putting  
together some detailed mockups. They're available at:


If you notice, these mockups specify an approach that is very similar  
to myYahoo's news portal, available at http://cm.my.yahoo.com/. The  
noteworthy features of this approach are:

  * the use of a small drag "avatar" (the thing that follows your  
mouse during a drag operation)
  * a coloured, horizontal bar representing the drop target (the spot  
where the thing will land when you let go of the mouse)

Another approach to drag and drop layouts is documented in the Fluid  
design pattern for Layout Preview:


This approach is similar to iGoogle, http://www.google.com/ig.  
Noteworthy features include:

  * the use of a full-sized, transparent drag avatar that shows the  
whole portlet
  * a full-sized outlined box for the drop target
  * other portlets on the page shift out of the way to show a  
realistic preview of how the layout will look

What's the best approach? I'm thinking this is one of those "it  
depends" questions. When portlets are similar in size and closely  
spaced, the myYahoo approach is probably simpler and easier to  
control. When portlets are more widely spaced and may have different  
sizes, a full preview of the layout seems more useful.

At the time of the original designs, it's my understanding that we  
went with the myYahoo-style interaction because it was immediately  
similar to some existing code we have in the Reorderer. On the other  
hand, the Reorderer is highly customizable. The dev team tells me that  
implementing both behaviours should be relatively straightforward. It  
may impact our release date a bit, but should we consider taking the  
time to provide an option that will allow for the iGoogle-style of  

I'd really appreciate opinions and advice from designers in the  


Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto

More information about the fluid-work mailing list