The core steps to implement HTML5 drag and drop function include: 1. Set the element draggable="true" attribute to enable drag; 2. Set dataTransfer data in the dragstart event; 3. Call e.preventDefault() in the dragover event to allow placement; 4. Get data and perform operations in the drop event; at the same time, pay attention to the default behavior of the image, cross-domain restrictions, mobile compatibility, and custom UI feedback.

The key point in implementing HTML5 drag and drop function is to understand its event process and data delivery mechanism. The HTML5 native Drag and Drop API provides basic support, but it needs to deal with several key links to make it work.

Set draggable elements

First, you have to tell the browser which elements can be dragged. This is done by setting draggable="true" property. This property is suitable for most HTML elements, such as <div> , <code><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175147818372221.jpeg" class="lazy" alt="Implementing drag and drop functionality using the HTML5 Drag and Drop API." > , etc.

For example:

 <div draggable="true">Drag me to try</div>

If you just set draggable to true , you think you can drag it, and you may be disappointed. Because by default, elements like <div> will not have obvious visual feedback or behavioral changes even if they are set to draggable. It must be coordinated with JavaScript drag and drop events to truly achieve interaction.

Handle drag and drop events

The entire drag-and-drop process involves multiple events, the most important of which are:

• dragstart : Triggered when starting dragging
• dragover : Continuously triggered when the dragged element moves over the target area
• drop : Triggered when the mouse is released in the target area

The usual practice is to set dragged data in dragstart , block default behavior in dragover to allow placement, and do the actual operation in drop .

The sample code is as follows:

 document.querySelector('.draggable').addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', 'This is the dragged data');
});

document.querySelector('.droptarget').addEventListener('dragover', function(e) {
    e.preventDefault(); // The default behavior must be blocked, otherwise the drop cannot be triggered
});

document.querySelector('.droptarget').addEventListener('drop', function(e) {
    const data = e.dataTransfer.getData('text/plain');
    console.log('Received data:', data);
});

Note that dataTransfer is an object used to pass data during drag and drop, and can pass text, URLs, HTML fragments, etc.

Frequently Asked Questions and Precautions

Although the HTML5 DnD API is very convenient, it is easy to get stuck in use:

• Default behavior when dragging and dropping images : If you are dragging an image, the image link will be opened by default (especially in Chrome). To avoid this, you can call e.preventDefault() in dragstart .

• Cross-domain issues : When dragging content from other pages or external applications, some data formats may be limited, especially the base64 data for the image may not be available.

• Compatibility issues : Although modern browsers support it, mobile support is slightly weak, especially on iOS sometimes there are strange behaviors.

• Missing style feedback : The native API does not provide UI feedback such as highlighting, disable status when dragging, which requires manual class name or style modification to implement.

Let's summarize

The core steps in implementing HTML5 drag and drop function include setting draggable attributes, listening and handling dragstart , dragover and drop events, and paying attention to the data delivery method and browser compatibility. Although basic, this set of APIs is flexible enough to suit most simple drag and drop scenarios. For more complex interactions, it may also be necessary to combine third-party libraries to enhance the experience.

Basically all is it, not complicated but it is easy to ignore details.