Drag & Drop with revert Option

Description

If set to true, the element returns to its original position when the drag ends. It also specifies whether the reverteffect callback will be invoked when the drag operation stops. Defaults to false.

Syntax

Here is the simple syntax to set the revert option.

new Draggable('element', {revert:true});

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() {
            new Draggable('myimage', {revert:true} );
         }
      </script>
   </head>

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

This will produce following result −

scriptaculous_drag_drop.htm