Drag and Drop Modules Design Pattern

By Bill ScottFebruary 13th, 2006

Problem Summary

The user needs needs to re-arrange the layout of modules on a web page directly with the mouse.

Re-arranging modules with drag and drop on My Yahoo!

Drag and drop has been a common feature on desktop applications for many years. It is only recently that it has found its way to the web. There are a host of new web sites that attempt to bring the desktop to the web. These webtops usually implement drag and drop in order to re-arrange modules around the “desktop” within a browser page.

Recently, we added drag and drop support to My Yahoo!. We spent a good deal of time doing user research and refining our drag and drop library in the process. The result of that research and experimentation has been documented in this pattern.

The pattern can be found at: Drag and Drop Modules.

11 Comments

  1. [...] Yahoo has just unveiled their new User Interface Blog to the public. This is a great resource for those getting into advanced CSS, DOM-scripting, JSON, and AJAX applications. Why should you care? Yahoo has hired some of the leading web developers over the past couple years and their passing their wisdom to you. [...]

  2. Pretty excited about yui, but having a hard time (can’t be that hard, since I only started trying today :) ) getting a couple things to work that I can’t see covered in the examples. Here are two more examples I would like to see

    1. Something like my yahoo! Say three columns, for which I would foresee using YAHOO.util.DDTarget. Then chunks in each column, which I started trying with YAHOO.util.DD, but started trying using ygDDSwap, to little avail.

    2. Something like a toolbelt on the top with something like my requested example 1 beneath. Drop something from the toolbelt to the containers beneath and a different thing appears. Like a thumbnail on the toolbelt becomes a full picture in the lower container.

    Guess I am just thinking the more examples the better, and I don’t see any of your extant examples that cover the functionality for my examples above.

    Great work!
    Earl

  3. I am looking something like a drag & drop, where a user can pick up some user data, drag and drop it onto a gif or jpeg stock chart, and have it positioned and shown automatically with the correct date. That’ll be super for my http://www.stockdigg.com, where users can pick a story tagged with votes and published to the front page, and then drag them to the corresponding stock chart.

  4. Yahoo! shares AJAX libraries with developers…

    Yahoo! is really on a roll lately. The company seems to be infused with a double-shot of Web 2.0 espresso. They are aquiring the right companies (Flickr, del.icio.us, Upcoming). They’ve avoided a lot of the negative press that Google has……

  5. Yes, I would like to see an drag-and-drop example of sortable windows like my.yahoo.com has. Since new AJAX frameworks are released as mushrooms after rain, their use should be much easier.

  6. [...] Yahoo has just unveiled their new User Interface Blog to the public. This is a great resource for those getting into advanced CSS, DOM-scripting, JSON, and AJAX applications. Why should you care? Yahoo has hired some of the leading web developers over the past couple years and their passing their wisdom to you. [...]

  7. I love the YUI – very solid, complete, and easy to use. A couple things I’d love to see are a sortable grid and a scrollable content pane. Are there any plans for something like that?

  8. I would also like to see some real demos that show how HTML layers/modules or similar can be moved around a page and snap into position.

  9. @Anon: Drag and drop as you described is live on http://my.yahoo.com

  10. Has it been hard to keep the drag-drop-module behavior working on IE/PC? And how does IE7/Vista look, as far as accomodating these patterns?
    For several months now, my IE6.029 on Windows XP hasn’t been able to drag/drop these modules. They move a few mm, then get stuck. The Edit drop-down move functionality also doesn’t work.
    Firefox, and Safari/Mac work fine.
    Oh wait, now IE is behaving: must have scared it by launching Firefox…

  11. Administrator said:
    October 16, 2006 at 2:52 pm

    I personally have not experienced any issues over the last number of months. I have a experimental area using drag and drop (as well as using it in a few things I am working on here at Yahoo!) — http://billwscott.com/simpledd/

    I also pinged the author of the YUI drag and drop library (Adam Moore) and this is his comment to me:

    > Hey Bill, there have been no changes to drag
    > and drop to get it to work in
    > IE7, although it is not impossible that there
    > are changes in Dom for IE7
    > that drag and drop is taking advantage of.
    > -Adam