This script.aculo.us Drag & Drop hoverclass Option is used create a active hoverclass where you can drag a drag-able element to a drop area. In that drop area, the element will be placed. This is a name of a CSS class which will be added to an element while the droppable option is active.
Syntax:
Droppables.add('element', {hoverclass: 'cssClass'});
Example: Below example illustrate the script.aculo.us Drag & Drop hoverclass Option.
<!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;
}
#droparea {
float: left;
width: 550px;
height: 73px;
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 hoverclass Option
</ strong >
< div id = "draggables" >
< img src = "gfg.png" />
</ div >
< div id = "droparea" >
Drag the Image and Drop Your Image in this area
</ div >
</ body >
</ html >
|
Output: