Skip to content
Related Articles

Related Articles

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

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

Syntax:

{ starteffect: effectFunction }

Values:

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

The below example illustrates Drag & Drop starteffect 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,
  
                        // Define the effect to be used
                        // when the dragging starts
                        starteffect: function (element) {
                            new Effect.Opacity(element,
                                {
                                    from: 0,
                                    to: 1.0,
                                    duration: 5
                                })
                        }
                    });
                });
        }
    </script>
</head>
  
<body style="text-align: center;">
    <div>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
  
        <p>A Computer Science Portal
            for Geeks
        </p>
    </div>
  
    <strong>
        script.aculo.us Drag & Drop
        starteffect Option
    </strong>
    <div id="draggables">
        <img src=
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :