Starbow Consulting

_Damn, just lost my first version of this post. I need to see about getting the autosave module working_

I am working to wrap my brain around Drag & Drop in Drupal. "Interface":http://interface.eyecon.ro, the jQuery UI plug-in, seems like the best place to start. I am using jjeff's "expiremental jQuery Update modules":http://groups.drupal.org/node/3576 so I can use the latest version (v1.2).

I have also looked at the Ext UI library, and it looks really cool, much slicker than Interface, but it is also much bigger. People are already freaking out about Interface's 80K footprint, and just the D&D and tree parts of Ext weigh in at ~150K

Interface is made of a bunch of modular, single purpose scripts that extend the jQuery object to add behaviors.

*idrag.js*
Adds the Draggable behavior, which turns a normal element into one that can be dragged around the page and dropped onto droppables. All the behavoirs take an hash of options (some):

* ghosting: true = drag a copy of the element
* revert: true = put the element back after dragging
* opacity: 0-1 opacity of element while it is being dragged
* axis: 'vertically' or 'horizontally' - limit dragging motion
* onStart, onStop, onChange, onDrag - callbacks

*idrop.js*
Adds the Droppable behavior, which turns an element into a dropzone for draggable elements. (some)

* accept(required): class name of draggables this dropzone accepts.
* activeClass: class to add to this dropzone when an acceptable draggable is moved. Used to highlight all valid dropzones.
* hoverClass: same, but only when the draggable is inside of dropzone. Used to say - go ahead and drop here.
* tolerance: pointer, intersect or fit - how exact to be when catching dropped dragable.
* onDrop, onHover, onOut - callbacks which pass in the draggable.

*isortables.js*
Adds Sortable behavior, which builds on-top of draggable and droppable. A sortable element is both draggable itself and defines a dropzone for other elements. This is the interesting one to me. Here is a "nice demo":http://interface.eyecon.ro/demos/sort.html. Options:

* accept (required): The class name for items inside the container
* activeclass: The class for the container when one of its items has started to move.
* hoverclass: The class for the container when an acceptable item is inside it.
* helperclass: The helper is used to point to the place where the item will be moved. This is the class for the helper. _I need to figure out more about this one_.
* opacity: Opacity (between 0 and 1) of the item while being dragged. _not sure why this isn't just a class_
* ghosting: When true, the sortable is ghosted when dragged.
* axis: 'horizontally' or 'vertically'
* tolerance: Either 'pointer', 'intersect', or 'fit'.
* fit: When true, sortable must be inside the container in order to drop.
* containment: Use 'parent' to constrain the drag to the container.
* fx: Duration for the effect applied to the sortable. _I don't get this one yet_
* onStart, onStop : callbacks for when element starts/stops being dragged.
* onHover, onOut, : callbacks for when element is active as a dropzone, draggable is the argument.
* onChange: Callback that gets called when the sortable list changed. argument is array of serialized elements.

*iautoscroller.js*
Used to scroll the page on dragging dragables. Example: