Open In App

script.aculo.us Drag & Drop reverteffect Option

Last Updated : 12 Mar, 2021
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

This script.aculo.us Drag & Drop reverteffect Option is used returns to its defined 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
<!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>

Output:


Next Article

Similar Reads