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:



  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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Before dragging:

After Dropping:

Example-2:ondragenter and ondragleave.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.