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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
