Open In App

HTML | DOM DragEvent

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  1. For ondragenter property:
    • HTML:
      <element ondragenter="script">
    • JavaScript:
      object.ondragenter = function(){script};
  2. For ondrag property:
    • HTML:
      <element ondrag="script">
    • JavaScript:
      object.ondrag = function(){script};
  3. For ondrop property:
    • HTML:
      <element ondrop="script">
    • JavaScript:
      object.ondrop = function(){script};
  4. For ondragend property:
    • HTML:
      <element ondragend="script">
    • JavaScript:
      object.ondragend = function(){script};
  5. For ondragleave property:
    • HTML:
      <element ondragleave ="script">
    • JavaScript:
      object.ondragleave = function(){script};
  6. For ondragover property:
    • HTML:
      <element ondragover="script">
    • JavaScript:
      object.ondragover = function(){script};
  7. 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


Last Updated : 15 Feb, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads