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;">neveropen</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> |
… [Trackback]
[…] Find More here on that Topic: geeksforgeeks.org/script-aculo-us-drag-drop-hoverclass-option-2/ […]