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> |
