Skip to content
Related Articles

Related Articles

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

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :