Skip to content
Related Articles

Related Articles Drag & Drop onHover Option

Improve Article
Save Article
  • Last Updated : 18 Jan, 2021
Improve Article
Save Article

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


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



<!DOCTYPE html>
    <title>Drag and Drop onHover option</title>
    <script type="text/javascript" 
    <script type="text/javascript" 
        #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;
    <script type="text/javascript">
        window.onload = function () {
            // Make the image draggable
                'img')).each(function (item) {
                new Draggable(item, { 
                    revert: true, ghosting: true 
                'hoverarea', {
                hoverclass: 'hoverActive',
                onHover: moveItem
        // We want display a text when we are 
        // over the hover area
        function moveItem(draggable, hoverarea) {
                "over").style.display = "block";
    <!-- Draggable image -->
    <div id="draggables">
        <img height=100px width=100px src="gfg.png" />
    <!-- Hover Area -->
    <div id="hoverarea">
        <p>Hover over this area</p>
        <div class="container">
            <div id="over">Over the hover area</div>


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!