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:

script.aculo.us Drag & Drop onDrop Option

parasmadan15

Improve

Article Tags :

script.aculo.us Drag & Drop onHover Option

Similar Reads

Thank You!

What kind of Experience do you want to share?