The way to add drag and drop functionality to a web page is to use HTML5's Drag and Drop API, which is natively supported without additional libraries. The specific steps are as follows: 1. Set the element draggable="true" to enable drag; 2. Listen to dragstart, dragover, drop and dragend events; 3. Set data in dragstart, block default behavior in dragover, and handle logic in drop. In addition, element movement can be achieved through appendChild and file uploading can be achieved through e.dataTransfer.files. Note: PreventDefault() must be called to trigger drop. The mobile side supports poorly. It is recommended to use a third-party library for complex sorting.

It is actually not difficult to add drag and drop functions to web pages, and it can be achieved using HTML5's Drag and Drop API. It is natively supported and does not require the introduction of additional libraries. It is suitable for interactions such as file uploads and element sorting.

Preparation: Set draggable elements

To make an element be dragged, first add draggable="true" attribute to it. For example, a <div> or image cannot be dragged by default, but the drag event can be triggered after adding this property. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165462390139.jpeg" class="lazy" alt="Adding drag and drop functionality using the HTML5 Drag and Drop API."><pre class='brush:php;toolbar:false;'> &lt;div draggable=&quot;true&quot;&gt;Drag me to try&lt;/div&gt;</pre><p> Then you need to listen for several key events: <code>dragstart , dragover , drop and dragend . These events correspond to the actions of dragging start, dragging onto the target area, releasing the mouse, and dragging ends.

Basic process of dragging and dropping

The drag and drop operation is mainly divided into three steps:

• Start dragging : Set drag data and effects in dragstart event.
• Drag to target area : Block default behavior in dragover , otherwise drop cannot be triggered.
• Free placement : Process data in drop and complete logic.

For example, you want to drag a box into another area:

 const dragEl = document.querySelector('#drag');
const dropZone = document.querySelector('#drop-zone');

dragEl.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', 'This is dragged data');
});

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault(); // The default behavior must be blocked in order to trigger drop
});

dropZone.addEventListener('drop', (e) => {
  const data = e.dataTransfer.getData('text/plain');
  console.log('Received data:', data);
});

This completes the most basic drag-and-drop interaction.

Advanced Drag and Drop: Move elements or file uploads

In addition to passing text data, you can also use drag and drop to move DOM elements or upload files.

For example, if you want to drag an element from one container to another, you can append the node to the new location when drop :

 dropZone.addEventListener('drop', (e) => {
  const id = e.dataTransfer.getData('text/plain');
  const draggedEl = document.getElementById(id);
  dropZone.appendChild(draggedEl);
});

If it is a file upload scenario, such as dragging a local image to the page, you can get the file list through e.dataTransfer.files :

 dropZone.addEventListener('drop', (e) => {
  const files = e.dataTransfer.files;
  for (let file of files) {
    if (file.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = () => {
        const img = document.createElement('img');
        img.src = reader.result;
        dropZone.appendChild(img);
      };
      reader.readAsDataURL(file);
    }
  }
});

This part of the code can be directly previewed after dragging in the image.

Notes and FAQs

Some details are easily overlooked when using the HTML5 drag and drop API:

• dragover must call preventDefault() , otherwise drop will not be triggered
• Different browsers may have different support for drag and drop styles, such as drag and cursor.
• Mobile support for native drag and drop is not very good, and additional touch events are required
• If you want to do complex drag-and-drop sorting, you can consider combining third-party libraries (such as SortableJS)

Basically all that is it. Although the drag and drop function of HTML5 is simple, it can also produce good interaction effects after use.