• 1
• 2
• 3
• 4
• 5

absynthe add added approach array blog bruno cell check class classes code comments containers cool current december demo design documentation drag draggable dragged dragger dragging drop droppable droppables element elements email error event events examples expect figueiredo find firefox frames fredrik function good great hat html http interesting item javascript job jonathan js latest leaves left link lot mail makedraggable method methods mike mikeb mootools nice object october oncomplete ondrop onmousedown onstart opacity opera options page position post prototype proxies ps pull put questions quick raju related resume sample scriptaculous september set simple single site snook snookca sortable source starting stuff svn temuri text thought time top valerio var web work working works yui

Keyword Cloud Navigation Map

So, without an actual demo to play around with, I thought I'd put one together, both to see how easy it'd be to work with and to help demonstrate to others what to expect. What a better example than the drag and drop (especially since I'm finishing up a project that just happened to use drag and drop). Check out the example and check out the source code. I'll be going through and highlighting some of the interesting things.

Doing just enough

One of the things that I noticed in comparison to the Prototype/Scriptaculous (P&S) approach is that there's a basic framework for handling drag and drop and not much more. Where P&S can do much of it for you with just a couple settings tweaks, Mootools creates the hooks and leaves you to pull off the nitty gritty. Right off the bat, I created my new draggable.

$('dragger').addClassName('drag').makeDraggable();

Read Full Tutorial...