script.aculo.us Drag & Drop onHover Option

Last Updated : 18 Jan, 2021

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> 