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 |
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:
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:
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:
Contact Us