HTML | DOM DragEvent

The DOM Drag Event is an event that occurs when an element or text selection is being dragged or dropped. It is a very common feature of HTML5.

Event Types:

ondrag: Event that occurs when the element is dragged.
ondrop: Event that occurs when the dragged element is dropped on the specified drop target.
ondragenter: Event that occurs when the dragged element enters the drop target.
ondragleave: Event that occurs when the dragged element leaves the drop target.
ondragover: Event occurs when the dragged element is over the drop target.

Syntax:

For ondragenter property:

HTML:
```
<element ondragenter="script">
```

JavaScript:

object.ondragenter = function(){script};

For ondrag property:

HTML:
```
<element ondrag="script">
```
JavaScript:
```
object.ondrag = function(){script};
```

For ondrop property:

HTML:
```
<element ondrop="script">
```
JavaScript:
```
object.ondrop = function(){script};
```

For ondragend property:

HTML:
```
<element ondragend="script">
```
JavaScript:
```
object.ondragend = function(){script};
```

For ondragleave property:

HTML:
```
<element ondragleave ="script">
```

JavaScript:

object.ondragleave = function(){script};

For ondragover property:

HTML:
```
<element ondragover="script">
```
JavaScript:
```
object.ondragover = function(){script};
```

For ondragstart property:

HTML:
```
<element ondragstart="script">
```

JavaScript:

object.ondragstart = function(){script};

Example-1: ondrag and ondrop.

<html> 

<head> 

    <style>  

        .droptarget { 

           /*defining the target with different  

          properties where the element has to 

          be dropped*/ 

            float: left; 

            width: 100px; 

            height: 35px; 

            margin: 15px; 

            padding: 10px; 

            border: 1px solid #aaaaaa; 

        } 

    </style> 

</head> 

<body> 

    <div class="droptarget"

         ondrop="drop(event)" 

         ondragover="allowDrop(event)"> 

        <p ondragstart="dragStart(event)" 

           ondrag="dragging(event)" 

           draggable="true" 

           id="dragtarget"> 

          Drag me! 

      </p> 

    </div> 

    <div class="droptarget" 

         ondrop="drop(event)"

         ondragover="allowDrop(event)"> 

  </div> 

    <p style="clear:both;"> 

        <p id="demo"> 

  </p> 

        <script> 

            function dragStart(event) { 

               // starting dragging 

                event.dataTransfer.setData( 

                  "Text", event.target.id); 

            } 

            function dragging(event) { 

              // element being dragged 

                document.getElementById( 

                  "demo").innerHTML =  

                  "The p element is being dragged";  

            } 

            function allowDrop(event) { 

                event.preventDefault(); 

            } 

            function drop(event) { 

                event.preventDefault(); 

                // returns the data that is dropped 

                var data = event.dataTransfer.getData("Text");  

                event.target.appendChild( 

                  document.getElementById(data)); 

               //element is being dropped 

                document.getElementById("demo").innerHTML = 

                  "The p element was dropped"; 

            } 

        </script> 

</body> 

</html>

Output:

Before dragging:

After Dropping:

Example-2:ondragenter and ondragleave.

<!DOCTYPE HTML> 

<html> 

<head> 

    <style> 

        .droptarget { 

            float: left; 

            width: 100px; 

            height: 35px; 

            margin: 15px; 

            margin-right: 100px; 

            padding: 10px; 

            border: 1px solid #aaaaaa; 

        } 

    </style> 

</head> 

<body> 

    <div class="droptarget" 

         ondrop="drop(event)" 

         ondragenter="dragEnter(event)" 

         ondragleave="dragLeave(event)" 

         ondragover="allowDrop(event)"> 

        <p ondragstart="dragStart(event)" 

           draggable="true" 

           id="dragtarget"> 

          Drag me! 

      </p> 

    </div> 

    <div class="droptarget" 

         ondragenter="dragEnter(event)" 

         ondragleave="dragLeave(event)" 

         ondrop="drop(event)" 

         ondragover="allowDrop(event)"> 

  </div> 

    <p style="clear:both;"></p> 

    <p id="demo"></p> 

    <script> 

        function dragStart(event) {  

            //element being dragged 

            event.dataTransfer.setData 

            ("Text", event.target.id); 

        } 

        function dragEnter(event) { 

            if (event.target.className == "droptarget") { 

                //entering the dropzone 

                document.getElementById("demo").innerHTML = 

                  "Entered the dropzone";  

                event.target.style.backgroundColor =  

                  "lightyellow"; 

            } 

        } 

        function dragLeave(event) { 

            if (event.target.className == "droptarget") { 

                //leaving the dropzone 

                document.getElementById("demo").innerHTML =  

                  "Left the dropzone";  

                event.target.style.backgroundColor = ""; 

            } 

        } 

        function allowDrop(event) { 

            event.preventDefault(); 

        } 

        function drop(event) {  

            // element being dropped 

            event.preventDefault(); 

            event.target.style.backgroundColor = ""; 

            var data = event.dataTransfer.getData 

            ("Text"); 

            event.target.appendChild( 

              document.getElementById(data)); 

        } 

    </script> 

</body> 

</html>

Output:
Before Dragging:

After Dropping:

Supported Browsers:

Google Chrome 4.0
Internet Explorer 9.0
Mozilla Firefox 3.5
Safari 6.0
Opera 12.0

Article Tags :

HTML

Web Technologies

HTML-DOM