DragDropExtra.js

We have been using the Prototype and Script.aculo.us javascript libraries for quite some time now with much success. That said, there was one area that with a client we were having a impassable problem. They wanted two columns, both of which have overflow set to "auto" so they both scroll independently. They wanted from there to have the items in one column draggable to the other, without modification to the actual column (leave the element, create a ghost). Seems simply complex right? We worked with the Script.aculo.us library in an attempt to accomplish this, but most solutions turned up bust. We eventually extended and enhanced the Draggables and Droppables code to accomplish the functionality. We named this extension DragDropExtra.js and it is a drop in enhancement (just include and you get the benefits of it). It has been verified as working with the newest script.aculo.us library (1.8.0). Usage is simple, you just set the parameter superghosting to true and it enables the creation of a new element at the body level and allocation for the dragging. This is in contrary to the standard version which replicates the element and attaches it to the original parent, making dragging out of a overflow: auto pretty much impossible (or at least unusable). Finally we enhanced the positioning code to ensure that the dropping will factor in when the overflow: auto has been set on the drop area and appropriate calculate where the item was dropped. If you find any bugs or issues, twitter me at http://www.twitter.com/voodootikigod with them.

We are publishing this code extension with the standard MIT license, from Iterative Designs with love.

UPDATE: The code has been posted to GitHub for hot forking action please help fix/grow/expand its reach and functionality: http://github.com/voodootikigod/dragdropextra/

Download DragDropExtra.js.

4752 Comments Written by voodootikigod on November 9th, 2007 @ 12:16 PM Filed under: Blog Tagged: ,

Comments