This script.aculo.us Drag & Drop greedy Option is used to stops processing hovering other droppable, under the drag-gable won’t be searched. The default value of this option is true, that means the drop area will accept the draggable element false won’t.
Syntax:
Droppables.add('element', {greedy: false or true});
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',
greedy: false, 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;
}
#droparea {
float: left;
width: 650px;
height: 90px;
border: 2px solid gray;
text-align: center;
font-size: 16px;
padding: 12px;
}
</ style >
</ head >
< body >
< div >
< h1 style="color: green">
GeeksforGeeks
</ h1 >
< p >A Computer Science Portal for Geeks</ p >
</ div >
< strong >
script.aculo.us Drag & Drop
greedy Option
</ strong >
< div id="draggables">
< img src="gfg.png">
< img src="gfg1.png">
</ div >
< div id="droparea">
Drag the Image and Drop Your
Image in this area
</ div >
</ body >
</ html >
|
Output:
-
Before drag and drop:
-
After drag and drop: Drop area won’t accept the element.