LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Drag and Drop


HTML5 Drag and Drop

The HTML5 has native support for the drag and drop feature.

Drag and Drop an Element

The HTML5 drag and drop feature allows the user to drag and drop an element to another location. The drop location may be a different application. While dragging an element a translucent representation of the element is follow the mouse pointer.

Browsers Icon

Browsers

  • Firefox
  • Google Chrome
  • Internet Explorer
  • Apple Safari
  • Opera

Basic Support

  • YES
  • YES
  • YES
  • YES
  • YES

Version

  • 3.5
  • 4.0
  • 9.0
  • 6.0
  • 12.0


Demo

Drag and drop the image into the drop box:

Flying Kites

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Example of HTML5 Drag and Drop</title>
     <script type="text/javascript">
          function dragStart(e){
               // Sets the operation allowed for a drag source
               e.dataTransfer.effectAllowed = "move";
               // Sets the value and type of the dragged data
               e.dataTransfer.setData("Text", e.target.getAttribute("id"));
         }

     function dragOver(e){
          // Prevent the browser default handling of the data
          e.preventDefault();
          e.stopPropagation();
     
     } function drop(e){
          // Cancel this event for everyone else
          e.stopPropagation();
          e.preventDefault();

          // Retrieve the dragged data by type
          var data = e.dataTransfer.getData("Text");

          // Append image to the drop box
          e.target.appendChild(document.getElementById(data));
     }
</script>


<style type="text/css">
#dropBox{
     width: 200px;
     height: 200px;
     border: 5px dashed gray;
     background: lightyellow;
     text-align: center;
     margin: 20px 0;
     color: orange;
}

#dropBox img{
     margin: 10px;
}

</style>
</head>


<body>
     <h2>Drag & Drop Demo</h2>
     <p>Drag and drop the image into the drop box:</p>
     <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
          <!--Dropped image will be inserted here-->
     </div>
     <img src="/images/extra-images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="180" height="180" alt="Flying Kites">
</body>
</html>

Drag and Drop Events

A number of events are fired during the various stages of the drag and drop operation. But mouse events such as mousemove are not fired during a drag operation. The following table provides you a brief overview of all the drag and drop events.

Event Description
ondragstart Fires when the user starts dragging an element
ondragenter Fires when a draggable element is first moved into a drop listener
ondragover Fires when the user drags an element over a drop listener
ondreagleave Fires when the user drags an element out of drop listener
ondrag Fires when the user drags an element anywhere; fires constantly but can give X and Y coordinates of the mouse cursor
ondrop Fires when the user drops an element into a drop listener successfully
ondragend Fires when the drag action is complete, whether it was successful or not. This event is not fired when dragging a file to the browser from the desktop.

x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine