Skip to content
Related Articles

Related Articles

script.aculo.us Drag & Drop reverteffect Option
  • Last Updated : 25 Nov, 2020

This script.aculo.us Drag & Drop reverteffect Option is used returns to its define position when the drag ends. It also specifies whether the reverteffect callback will be invoked when the drag operation stops.

Syntax:

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

Values:

  • reverteffect: This option takes the reverteffect function.

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script type="text/javascript" 
        src="prototype.js">
    </script>
  
    <script type="text/javascript"
        src="scriptaculous.js">
    </script>
  
    <script type="text/javascript">
        window.onload = function () {
            var img = 'gfg';
            new Draggable('gfg', {
                revert: true,
                reverteffect: function () {
                    new Effect.MoveBy('gfg', 100, 100);
                }
            });
        }
    </script>
</head>
  
<body>
    <div>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
  
        <p>
            A Computer Science 
            Portal for Geeks
        </p>
    </div>
  
    <strong>
        script.aculo.us Drag & 
        Drop reverteffect Option
    </strong>
  
    <p>Drag and leave the image</p>
  
    <img id="gfg" src="gfg.png">
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :