How To Use Ondrag Event In JavaScript With Example

admin_img Posted By Bajarangi soft , Posted On 29-09-2020

In Java script we can drag and drop to another message from one div to another div. today we are going to discuss how to use ondrag event in java script

How To Use Ondrag Event In JavaScript With Example

The ondrag event occurs when an element or text selection is being dragged.

Drag and drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location. 

Note: To make an element draggable, use the global HTML5 draggable attribute.

Links and images are draggable by default, and do not need the draggable attribute.

There are many events that are used, and can occur, in the different stages of a drag and drop operation:

  • Events fired on the draggable target (the source element):
    • ondragstart - occurs when the user starts to drag an element
    • ondrag - occurs when an element is being dragged
    • ondragend - occurs when the user has finished dragging the element

  • Events fired on the drop target:
    • ondragenter - occurs when the dragged element enters the drop target
    • ondragover - occurs when the dragged element is over the drop target
    • ondragleave - occurs when the dragged element leaves the drop target
    • ondrop - occurs when the dragged element is dropped on the drop target

Note: While dragging an element, the ondrag event fires every 350 milliseconds.

Example(1)
In HTML:

<style>
    .droptarget {
        float: left;
        width: 200px;
        height: 80px;
        margin: 15px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
</style>
<p>Drag and drop to another box</p>

        <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
            <h2 ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</h2>
        </div>

        <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

        <h2 id="demo"></h2>

        <script>
            function dragStart(event) {
                event.dataTransfer.setData("Text", event.target.id);
            }

            function dragging(event) {
                document.getElementById("demo").innerHTML = "The h2 element is being dragged";
            }

            function allowDrop(event) {
                event.preventDefault();
            }

            function drop(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
                document.getElementById("demo").innerHTML = "The h2 element was dropped";
            }
        </script>

In above example demonstrates how to assign an "ondragstart" and "ondrag" event to a p element and an "ondragover" and "ondrop" event to a div element.

Example(2)
In JavaScript:

<style> 
.droptarget { 
float: left; 
width: 200px; 
height: 80px; 
margin: 15px;
padding: 10px; 
border: 1px solid #aaaaaa; 
} 
</style>
<div class="droptarget">
    <h2 id="dragtarget" draggable="true">Drag me!</h2>
</div>

<div class="droptarget"></div>


<h2 id="demo"></h2>

<script>
    /* Events fired on the drag target */
    document.ondragstart = function(event) {
        event.dataTransfer.setData("Text", event.target.id);
    };

    document.ondrag = function(event) {
        document.getElementById("demo").innerHTML = "The h2 element is being dragged";
    };

    /* Events fired on the drop target */
    document.ondragover = function(event) {
        event.preventDefault();
    };

    document.ondrop = function(event) {
        event.preventDefault();
        if ( event.target.className == "droptarget" ) {
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("demo").innerHTML = "The h2 element was dropped";
        }
    };
</script>

In above example uses the HTML DOM to assign "ondragstart", "ondrag", "ondragover" and "ondrop" events to the document object.

Example(3)
In JavaScript, using the addEventListener() method:

<style>
.droptarget {
float: left;
width: 200px;
height: 80px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<div class="droptarget">
    <p draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget"></div>
<h2 id="demo"></h2>
<script>
    /* Events fired on the drag target */
    document.addEventListener("dragstart", function(event) {
        event.dataTransfer.setData("Text", event.target.id);
    });

    document.addEventListener("drag", function(event) {
        document.getElementById("demo").innerHTML = "The h2 element is being dragged";
    });

    /* Events fired on the drop target */
    document.addEventListener("dragover", function(event) {
        event.preventDefault();
    });

    document.addEventListener("drop", function(event) {
        event.preventDefault();
        if ( event.target.className == "droptarget" ) {
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
            document.getElementById("demo").innerHTML = "The h2 element was dropped";
        }
    });
</script>

In above example uses the addEventListener() method to attach "dragstart", "drag", "dragover" and "drop" events to the document object.

Example(4)

<style>
.droptarget {
  float: left; 
  width: 100px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<div class="droptarget">
    <h2 draggable="true" id="dragtarget">Drag me!</h2>
</div>

<div class="droptarget"></div>

<h2 id="demo"></h2>

<script>
    /* Events fired on the drag target */

    document.addEventListener("dragstart", function(event) {
        // The dataTransfer.setData() method sets the data type and the value of the dragged data
        event.dataTransfer.setData("Text", event.target.id);

        // Output some text when starting to drag the p element
        document.getElementById("demo").innerHTML = "Started to drag the h2 element.";

        // Change the opacity of the draggable element
        event.target.style.opacity = "0.4";
    });

    // While dragging the p element, change the color of the output text
    document.addEventListener("drag", function(event) {
        document.getElementById("demo").style.color = "red";
    });

    // Output some text when finished dragging the p element and reset the opacity
    document.addEventListener("dragend", function(event) {
        document.getElementById("demo").innerHTML = "Finished dragging the h2 element.";
        event.target.style.opacity = "1";
    });

    /* Events fired on the drop target */

    // When the draggable p element enters the droptarget, change the DIVS's border style
    document.addEventListener("dragenter", function(event) {
        if ( event.target.className == "droptarget" ) {
            event.target.style.border = "3px dotted red";
        }
    });

    // By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
    document.addEventListener("dragover", function(event) {
        event.preventDefault();
    });

    // When the draggable p element leaves the droptarget, reset the DIVS's border style
    document.addEventListener("dragleave", function(event) {
        if ( event.target.className == "droptarget" ) {
            event.target.style.border = "";
        }
    });

    /* On drop - Prevent the browser default handling of the data (default is open as link on drop)
       Reset the color of the output text and DIV's border color
       Get the dragged data with the dataTransfer.getData() method
       The dragged data is the id of the dragged element ("drag1")
       Append the dragged element into the drop element
    */
    document.addEventListener("drop", function(event) {
        event.preventDefault();
        if ( event.target.className == "droptarget" ) {
            document.getElementById("demo").style.color = "";
            event.target.style.border = "";
            var data = event.dataTransfer.getData("Text");
            event.target.appendChild(document.getElementById(data));
        }
    });
</script>

In above example uses the HTML DOM to assign "ondragstart", "ondrag", "ondragover" and "ondrop" events to the document object.
 

Complete code of Ondrag Event In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Use Ondrag Event In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1{
        color: red;
    }

    .droptarget {
        float: left;
        width: 200px;
        height: 80px;
        margin: 15px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
</style>
<body>
<div class="container">
    <br>
       <div class="text-center">
        <h1>Use Ondrag Event In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <p>Drag and drop to another box</p>

        <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
            <h2 ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</h2>
        </div>

        <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

        <h2 id="demo"></h2>

        <script>
            function dragStart(event) {
                event.dataTransfer.setData("Text", event.target.id);
            }

            function dragging(event) {
                document.getElementById("demo").innerHTML = "The h2 element is being dragged";
            }

            function allowDrop(event) {
                event.preventDefault();
            }

            function drop(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
                document.getElementById("demo").innerHTML = "The h2 element was dropped";
            }
        </script>

    </div>
</body>
</html>

 

Related Post