Scriptaculous Draggable reverteffect Example


This post was originally published in 2010
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

I had a bit of a hard time finding which arguments are passed to the reverteffect function.

Scriptaculous’ documentation is somewhat opaque:

Effect, default to Effect.Move. Defines the effect to use when the draggable reverts back to its starting position.

Hmm, no mention of any arguments passed to the reverteffect function…

Here is an example of instantiating a new Draggable with a custom reverteffect:

new Draggable( element, {
    revert: true,
    reverteffect: function( element, top_offset, left_offset ){
        new Effect.Fade( element, {
            afterFinish: function(){
                $( element ).setStyle({
                    top: '0px',
                    left: '0px'
                new Effect.Appear( element );

Note that the arguments top_offset and left_offset are the offsets of the draggable as it was after the drag was completed. Also note that in my custom reverteffect function I’ve reset the draggable’s top and left offsets to 0, effectively shoving it back to it’s original position.

No comments | Trackback