script.aculo.us Drag & Drop onDrop Option

script.aculo.us Drag & Drop revert Option

Last Updated : 25 Nov, 2020

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

Syntax:

new Draggable('element', {revert:true});

Values:

revert: This value holds two values true and false default it's false.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src=
        "scriptaculous-js-1.9.0/lib/prototype.js">
    </script>

    <script type="text/javascript" src=
        "scriptaculous-js-1.9.0/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
                    });
                });

            Droppables.add('droparea', {
                hoverclass: 'hoverActive',
                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;
        }

        #gfg {
            width: 550px;
            height: 73px;
        }
    </style>
</head>

<body>
    <div id="draggables">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png">
    </div>
</body>

</html>

Output:

script.aculo.us Drag & Drop onDrop Option

S

skyridetim

Improve

Article Tags :

Similar Reads

script.aculo.us Drag & Drop reverteffect Option

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

script.aculo.us Drag & Drop snap Option

The snap option in the script.aculo.us Drag and Drop module is used to make a draggable element snap to a grid or constrain its movement in the defined space. It is set to false by default. It can be defined with a single value or a function that will define the places where the element would snap.

script.aculo.us Drag & Drop onEnd Option

The script.aculo.us libraryÂ is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone. The onEnd option is used to specify a callback function that would

script.aculo.us Drag & Drop greedy Option

This script.aculo.us Drag & Drop greedy Option is used to stops processing hovering other droppable, under the drag-gable won't be searched. The default value of this option is true, that means the drop area will accept the draggable element false won't. Syntax: Droppables.add('element', {greedy

script.aculo.us Drag & Drop onDrop Option

This script.aculo.us Drag & Drop onDrop Option is used to call the callback function which is called when a suitable drag-gable element is dropped onto the drop target and the target accepts it. Syntax: Droppables.add('element', {onDrop: 'callbackFunction'} ); Values: function: This option takes

script.aculo.us Drag & Drop accept Option

This script.aculo.us Drag & Drop accept Option is used to create an active accept condition where you can drag a draggable element to a drop area. In that drop area, the element will be placed if the accept class is the same as the class of your draggable element. Syntax: Droppables.add('element

script.aculo.us Drag & Drop onDrag Option

The script.aculo.us libraryÂ is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone. The onDrag option is used to specify a callback function that would

script.aculo.us Drag & Drop change Option

The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone. The change option is called just like the onDrag option, i.e. it is

script.aculo.us Drag & Drop onStart Option

The script.aculo.us libraryÂ is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone. The onStart option is used to specify a callback function that woul

script.aculo.us Drag & Drop

The DragDrop module can be used to make any element draggable or then it can be dropped in a drop zone. Making An element Draggable: Draggable elements can be made by making a draggable instance and then identifying the element to be made draggable Syntax: new Draggable( element_id, {options} ); Dra