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: