The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone.
The onHover option is used to specify a callback function that is activated when a suitable draggable item hovers over the hovering target.
Syntax:
{onHover: function}
Parameters: This option has a single value as mentioned above and described below:
- function: This is a callback function that would be invoked whenever the element is being hovered over the hovering target.
The below example illustrates the use of this option.
Example:
HTML
<!DOCTYPE html> < html >
< head >
< title >Drag and Drop onHover option</ title >
< script type = "text/javascript" src = "/javascript/prototype.js" >
</ script >
< script type = "text/javascript" src = "/javascript/scriptaculous.js" >
</ script >
< style >
#draggables {
border: 3px ridge blueviolet;
float: left;
padding: 9px;
}
#hoverarea {
display: flex;
flex-direction: column;
float: left;
margin-left: 40px;
width: 300px;
height: 300px;
border: 3px ridge blue;
text-align: center;
font-size: 24px;
}
.container {
position: relative;
text-align: center;
color: white;
}
#over {
display: none;
}
.hoverActive {
background-color: #8cdd81;
}
</ style >
< script type = "text/javascript" >
window.onload = function () {
// Make the image draggable
$A($('draggables').getElementsByTagName(
'img')).each(function (item) {
new Draggable(item, {
revert: true, ghosting: true
});
});
Droppables.add(
'hoverarea', {
hoverclass: 'hoverActive',
onHover: moveItem
});
}
// We want display a text when we are
// over the hover area
function moveItem(draggable, hoverarea) {
document.getElementById(
"over").style.display = "block";
}
</ script >
</ head >
< body >
<!-- Draggable image -->
< div id = "draggables" >
< img height = 100px width = 100px src = "gfg.png" />
</ div >
<!-- Hover Area -->
< div id = "hoverarea" >
< p >Hover over this area</ p >
< div class = "container" >
< div id = "over" >Over the hover area</ div >
</ div >
</ div >
</ body >
</ html >
|
Output: