Skip to content
Related Articles

Related Articles

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

This script.aculo.us Drag & Drop endeffect Option is used to define the function which is called when a suitable drag-gable element stops being dragged. The function can be used to define any effect.

Syntax:

{ endeffect: effectFunction }

Values:

  • effectFunction: This value defines the function that contains the effect to be shown when the drag-gable stops being dragged.

The below example illustrates Drag & Drop endeffect Option:

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 () {
  
            $A($('draggables').getElementsByTagName('img'))
                .each(function (item) {
                    new Draggable(item, {
                        revert: true, ghosting: true,
  
                        // Define the effect to be used when 
                        // the draggable is stopped dragging
                        endeffect: function (element) {
                            new Effect.Opacity(element, {
                                from: 0,
                                to: 1.0,
                                duration: 5
                            })
                        }
                    });
                });
  
            Droppables.add('droparea',
                { onDrop: moveItem }
            );
  
            // Set drop area default non cleared.
            $('droparea').cleared = false;
        }
  
        function moveItem(draggable, droparea) {
            if (!droparea.cleared) {
                droparea.innerHTML = '';
                droparea.cleared = true;
            }
  
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
        }
    </script>
    <style type="text/css">
        #draggables {
            width: 550px;
            height: 73px;
        }
  
        #droparea {
            float: left;
            width: 550px;
            height: 73px;
            border: 2px solid gray;
            text-align: center;
            font-size: 16px;
            padding: 12px;
        }
    </style>
</head>
  
<body>
    <div>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
  
        <p>A Computer Science Portal for Geeks</p>
  
    </div>
    <strong>
        script.aculo.us Drag & Drop
        endeffect Option
    </strong>
    <div id="draggables">
        <img src=
    </div>
    <br>
    <br>
    <div id="droparea">
        Drag the Image and Drop Your Image
        in this area
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :