Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 :