Drag & Drop with revert Option


Advertisements


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

<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

Advertisements