Open In App

script.aculo.us Drag & Drop

Improve
Improve
Like Article
Like
Save
Share
Report

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} );

Draggable Options:

Options

Description

revert

It is used to specify whether an element should return to its original position after being dragged.

snap

It is used to make a draggable element  constraint its movements.

zindex

It used to specify the z-index in the CSS stylesheet.

ghosting

It is used to specify whether the element should be cloned in the drop area or move to it.

constraint

It is used to specify the draggable directions.

handle

It is used to specify the handle to trigger the dragging.

starteffect

 It is used to define the function which is called when the specified  element starts dragging.

reverteffect

it is used to define the function which is called when the specified element reverts the drag.

endeffect

It is used to define the function which is called when the specified element stops dragging.

Callback Options:

Options

Description

change

Similar to onDrag triggered when the position of the element changes.

onStart

Triggered when a drag is initiated.

onEnd

Triggered when a drag is finished.

onDrag

Trigged continuously while the element is dragged and the mouse location is changing.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
     
    <script type="text/javascript"
        src="scriptaculous.js">
    </script>
     
    <script>
        var elements = ['element'];
        window.onload = function () {
            elements.each(function (item)
                { new Draggable(item); });
        }         
    </script>
</head>
 
<body>
    <img id="element" src="gfg.png" />
</body>
 
</html>


Output:

Creating the drop Area: Now we will be creating droppable instances to drop the element in the drop zone.

Syntax:

Droppables.add( element_id, {options} );

Droppable Options:

Options

Description

HoverClass

It is used to create an active hoverclass on the drop area.

Containment

It used to specify the id of the draggable element so that another element cannot be dropped in it.

Accept

When true, it only allows the elements having one or more CSS properties to be dropped over it.

Overlap

When a direction is given (horizontal/vertical) it will allow the user to drop the element only.
If it is overflowing more than 50% in the given direction.

Greedy

It allows overlapping draggable inside a drop area, the draggable below another element won’t be visible.

Callback Options:

Options

Description

onHover

It is triggered when an element hoversover the drop area.

onDrop

It is triggered when an element is dropped in the drop area.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
     
    <script type="text/javascript"
        src="scriptaculous.js">
    </script>
     
    <script>
        window.onload = function () {
            $A($('draggable').getElementsByTagName(
                'img')).each(function (item) {
                new Draggable(item, {
                    revert: true, ghosting: true
                });
            });
            Droppables.add('dropArea',
                { hoverclass: 'hoverActive',
                    onDrop: dropAppend }
            );
        }
 
        function dropAppend(draggable, dropArea) {
            draggable.parentNode.removeChild(draggable);
            dropArea.appendChild(draggable);
        }
    </script>
 
    <style>
        #dropArea {
            float: left;
            height: 125px;
            width: 435px;
            border: 3px ridge green;
            padding: 10px;
            float: left;
        }
 
        .hoverActive {
            background-color: #7cfa5c;
        }
 
        #draggable img,
        #dropArea img {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
    <div id="dropArea">
    </div>
    <div id="draggable">
        <img src="gfg.png" />
    </div>
</body>
 
</html>


Output:



Last Updated : 19 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads