HTML5 natively supports drag and drop function, and interacts by setting draggable attributes and listening to dragstart, dragover, and drop events. 1. Set the element draggable="true" to enable drag; 2. Use dataTransfer.setData() to pass data in dragstart; 3. The target area listens to the dragover and blocks the default behavior to allow placement; 4. Get data and process content in the drop event; precautions include cross-domain restrictions, visual feedback, mobile compatibility and file upload support. Mastering these key points can achieve basic drag-and-drop interaction.

The drag and drop function is very practical in web development, especially in scenarios where user interaction is required. HTML5 natively supports drag and drop (drag and drop), and does not require the introduction of additional libraries to achieve basic functions. Below are some key points and operation suggestions to help you get started quickly.

Basic structure of drag and drop

To implement drag and drop, at least two elements are required: a draggable element and a target zone.
By default, only certain HTML elements (such as pictures, links) are draggable, and other elements need to be manually set to draggable="true" to be dragged.

for example:

 <div id="dragElem" draggable="true">Drag me</div>
<div id="dropZone">Put here</div>

Next is to bind the event listener. The main events used are:

• dragstart : Triggered when starting dragging
• dragover : Continuously triggered when the dragged element moves above the target area
• drop : Triggered when the mouse is released and the mouse is finished.

Key steps to implement drag and drop

1. Set the behavior of draggable elements

In the dragstart event, you can specify the data passed when dragging. The most common method is to use dataTransfer.setData() method to save data.

 document.getElementById('dragElem').addEventListener('dragstart', function(e) {
    e.dataTransfer.setData("text/plain", "This is the content of the drag");
});

2. Allow elements to be dragged and dropped

By default, most elements do not allow drag and drop content to be received. You need to block the default behavior of dragover in order for drop event to take effect.

 document.getElementById('dropZone').addEventListener('dragover', function(e) {
    e.preventDefault(); // The default behavior must be blocked, otherwise drop will not fire});

3. Handle drag and drop logic

In the drop event, the data passed during the dragging process can be obtained and processed.

 document.getElementById('dropZone').addEventListener('drop', function(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData("text/plain");
    e.target.textContent = data; // Show dragged content});

Notes and FAQs

• Cross-domain issues : If you are dragging resources from other websites (such as images), you may encounter security restrictions.
• Style feedback : You can add some visual feedback when dragging, such as changing the background color of the target area to improve the user experience.
• Compatibility : Although modern browsers support HTML5 drag and drop APIs, mobile support may be slightly different, and it is recommended to test mainstream devices.
• Multiple drag and drop objects : If you want to support multiple draggable elements, it is best to bind a unified class name or selector for each element to avoid duplicate code.

Tips: Drag and drop file upload

In addition to dragging elements within the page, HTML5 also supports dragging files from locally, such as pictures, text, etc. Just listen to events in drop area and read FileList object.

 dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        const file = files[0];
        console.log("Drag in file name:", file.name);
    }
});

Basically that's it. Drag and drop seems simple, but there are a lot of details, especially in the event sequence and compatibility that are prone to errors. As long as you understand the role of dragstart , dragover and drop , and cooperate with the data transmission mechanism, you can achieve good interaction effects.

The above is the detailed content of HTML5 drag and drop tutorial. For more information, please follow other related articles on the PHP Chinese website!