Skip to content
Related Articles

Related Articles Drag & Drop endeffect Option

Improve Article
Save Article
  • Last Updated : 25 Nov, 2020
Improve Article
Save Article

This 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.


{ endeffect: effectFunction }


  • 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:



<!DOCTYPE html>
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript">
        window.onload = function () {
                .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
                { onDrop: moveItem }
            // Set drop area default non cleared.
            $('droparea').cleared = false;
        function moveItem(draggable, droparea) {
            if (!droparea.cleared) {
                droparea.innerHTML = '';
                droparea.cleared = true;
    <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;
        <h1 style="color: green">
        <p>A Computer Science Portal for Geeks</p>
    <strong> Drag & Drop
        endeffect Option
    <div id="draggables">
        <img src=
    <div id="droparea">
        Drag the Image and Drop Your Image
        in this area


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!