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 |
It is used to specify whether an element should return to its original position after being dragged. | |
It is used to make a draggable element constraint its movements. | |
It used to specify the z-index in the CSS stylesheet. | |
It is used to specify whether the element should be cloned in the drop area or move to it. | |
It is used to specify the draggable directions. | |
It is used to specify the handle to trigger the dragging. | |
It is used to define the function which is called when the specified element starts dragging. | |
it is used to define the function which is called when the specified element reverts the drag. | |
It is used to define the function which is called when the specified element stops dragging. |
Callback Options:
Options |
Description |
Similar to onDrag triggered when the position of the element changes. | |
Triggered when a drag is initiated. | |
Triggered when a drag is finished. | |
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 |
It is used to create an active hoverclass on the drop area. | |
It used to specify the id of the draggable element so that another element cannot be dropped in it. | |
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. |
It allows overlapping draggable inside a drop area, the draggable below another element won’t be visible. |
Callback Options:
Options |
Description |
It is triggered when an element hoversover the drop area. | |
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: