Javascript Drag and Drop Toolkits

The new WordPress Widgets use a javascript toolkit to create the drag and drop interface. There are several excellent kits available that provide lovely drag and drop functionality to ease the job of writing rich web interfaces. I spent a good portion of last Thursday looking them over to find one to use in the Widgets. Here I write my conclusions about two of them in the hopes that someone will take the best parts of each one and construct the perfect drag and drop script.

James Edwards a.k.a. Brothercake‘s Docking boxes (dbx) is already included in WordPress; it powers the draggable boxes in the writing interface. With dbx, you can take semantic, structural markup and make it work well and look sharp prior to adding scripted behaviors, then use id attributes and some external scripts to upgrade it into a beautiful and highly usable interface. What I find most impressive about this script is that the interface is 100% accessible via keyboard. If you don’t appreciate the full value of keyboard accessibility, go and break your wrists snowboarding and try to use your browser. If your insurance or your stomach won’t allow such drastic action, at least unplug your mouse until you appreciate it. The downside to dbx, and the only reason I couldn’t use it for this project, is that it doesn’t permit dragging items between different columnar lists.

Thomas FuchsScriptaculous, which name would probably never have occurred had God not invented the .us top-level domain, is a lovely set of scripts indeed. The demos are nice but the promise of a documentation wiki was not met by any obvious linkage to said wiki. Configuration was therefore accomplished by mimicking the demos. When I wanted to customize the UI to show a message in any empty columns, I found the exact interfaces I needed after a quick look at the well-organized code. The limitation I found with the Scriptaculous drag and drop tool is that it is not natively accessible via keyboard. I’ll have to add my own list manipulation controls to make the interface work without a mouse or without javascript.

The perfect toolkit have dbx’s keyboard accessibility and ability to be used without javascript, all while providing the multi-column sorting and powerful API of Scriptaculous. Is somebody already working on this?

5 Comments

  1. Yahoo! Design Patterns Library also has some I believe. They also support graceful degrading of Javascript.

  2. Damnz!

     /  August 25, 2006

    I was really amazed when I saw these effects in the widgets. Never thought there were specialized library-like code snippets for it, heck! I never knew javascript had such code libraries. Thanks a bunch!

  3. blacklight

     /  March 21, 2009

    Have you checked out this javascript drag and drop library?

    It totally works in IE and non-IE browsers, its a great little toolkit for designing your own widgets with draggable handles.

  4. guido

     /  July 23, 2009

    have a look at this one: http://www.walterzorn.com/dragdrop/api_e.htm

    btw, there he has also a JavaScript Vector Graphics Library: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Follow

Get every new post delivered to your Inbox.

Join 1,670 other followers

%d bloggers like this: