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!
