Drag & Drop with reverteffect Option

Description

This option is used to define the effect to use when the draggable reverts back to its starting position.

Defaults to a smooth slide to the element's original position. The reverteffect option specifies the function to be called just prior to the endeffect function when the revert option is set to true.

Syntax

new Draggable('element', {reverteffect: 'effectFunction'});

Here effectFunction is the function, which defines the effect to be applied.

Example

Live Demo

<html>
   <head>
      <title>Draggables Elements</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            var img = 'myimage';
            new Draggable('myimage' , {
            revert: true,
            reverteffect: function(){
               new Effect.MoveBy('myimage', 100,100);
               }
            });
         }
      </script>
   </head>

   <body>
      <p>Drag and leave this image to see the result.</p>
      <img id = "myimage" src = "/images/scriptaculous.gif"/>
   </body>
</html>

This will produce following result −

scriptaculous_drag_drop.htm