Skip to main content

HTML Drag-and-Drop (Live Playground)

In this tutorial, we will learn how to implement drag-and-drop functionality in your HTML documents using the HTML5 Drag-and-Drop API. This feature allows users to interact with elements on your web pages by dragging and dropping them.

The Drag-and-Drop API​

The HTML5 Drag-and-Drop API provides a set of events and properties that make it easy to implement drag-and-drop functionality in your web applications. The main events involved in the drag-and-drop process are:

  • dragstart: Fired when the user starts dragging an element.
  • drag: Fired continuously while the element is being dragged.
  • dragenter: Fired when a dragged element enters a valid drop target.
  • dragover: Fired continuously while the dragged element is over a valid drop target.
  • dragleave: Fired when a dragged element leaves a valid drop target.
  • drop: Fired when a dragged element is dropped on a valid drop target.
  • dragend: Fired when the drag operation is completed, regardless of whether the element was dropped or not.

Implementing Drag-and-Drop​

To implement drag-and-drop functionality, follow these steps:

  • Set the draggable attribute on the element you want to make draggable.
  • Add event listeners for the drag-and-drop events.
  • Handle the events to perform the desired actions.

Let's create a simple example:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Drag-and-Drop Example</title>
    <style>
      #drag-target {
        width: 100px;
        height: 100px;
        background-color: red;
      }

      #drop-zone {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        border: 2px dashed blue;
      }
    </style>
  </head>
  <body>
    <div id="drag-target" draggable="true">Drag me!</div>
    <div id="drop-zone">Drop here!</div>

    <script>
      const dragTarget = document.getElementById('drag-target');
      const dropZone = document.getElementById('drop-zone');

      dragTarget.addEventListener('dragstart', event => {
        console.log('dragstart id:', dragTarget.id);
        event.dataTransfer.setData('text/plain', dragTarget.id);
      });

      dropZone.addEventListener('dragover', event => {
        console.log('dragover...');
        event.preventDefault();
      });

      dropZone.addEventListener('drop', event => {
        event.preventDefault();
        const draggedElementId = event.dataTransfer.getData('text/plain');
        console.log('drop draggedElementId:', draggedElementId);
        const draggedElement = document.getElementById(draggedElementId);
        dropZone.appendChild(draggedElement);
      });
    </script>
  </body>
</html>

In this example, we created a draggable <div> element and a drop zone. We set the draggable attribute on the <div> element and added event listeners for the dragstart, dragover, and drop events. When the user drags the <div> element and drops it on the drop zone, the dragged element is appended to the drop zone.

Live Playground, Try it Yourself

Conclusion​

Now you know how to implement drag-and-drop functionality in your HTML documents using the HTML5 Drag-and-Drop API. This allows you to create more interactive and engaging user experiences by allowing users to interact with elements on your web pages by dragging and dropping them.