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} );
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
Share your thoughts in the comments
Please Login to comment...