Iterative Designs - DragDropExtra.js

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.

Comments

Alex on 26 Jul 06:54

You guys are awesome! I was at the point of banging my head against the wall because of this problem when I finally stumbled on this script. I was trying to piece this same solution myself from various other code samples and my limited knowledge of prototype and scriptaculous, but this does the trick. I did find one bug though: Line 180 should be "dropped = Droppables.fire(event, this._clone);" instead of "dropped = Droppables.fire(event, this.element);". Thanks for the great work!
Scott Willson on 28 Jul 21:53

Yeah. Thanks very much. Not sure if line 180 is really a big. Code seems to work better without it.
Ryan on 31 Jul 23:49

Fantastic ... How do I keep the same styling? My divs I'm dragging around have styles defined by drilling down #right div.whatever {blah}. With superghosting they are just a div in the body with no apparent classes so the dragged element loses it's flavah'. Thanks again!
Alex on 01 Aug 19:44

Ryan, Try giving your divs classes instead of ids for the style. So instead of "#right div.whatever" you should use something like ".right-div". That's what I'm doing and my styles stay completely intact. HTH
Ryan on 01 Aug 21:11

Instead I poked dragdropextra.js and just declared the class I wanted attached to my draggables. Horrible long-term solution -- perfect for now :P When I get the time I'll go back and do it the right way. Seems that IE7 is missing something for me, I haven't tested much to see if the problem is me or the code but when I start to drag the div it's clone blinks once on the left of the screen (I'm trying to drag from the right) and the show's over.
Steven Hammond on 22 Oct 14:25

This code is now hosted on github and there are a couple of bug fixes available -- particularly to the IE 2nd drag issue. Go to http://github.com/voodootikigod/iterativejs/tree/master for the latest. Steve

DragDropExtra.js

Comments

Post a comment