The key steps to implement the draggable function include: 1. Use the draggable attribute of HTML5 to make the elements draggable; 2. Set drag data through the dragstart event; 3. Listen to the dragover and drop event processing placement logic in the target area; 4. Use the FileList object to realize drag and drop upload. The HTML5 native drag and drop API uses a series of event control processes, such as dragstart, dragover, drop, etc., where draggable custom elements need to be set to set draggable="true" and bind dragstart event, and call setData() to save data. When handling drag and drop, the default behavior of dragover must be blocked to trigger the drop event, and get data through getData() to complete element movement or file processing. When uploading files, you need to read the file list from dataTransfer.files to avoid direct access to the path. A common error is that the default behavior is missing to prevent drag and drop content from being received.

Implementing drag and drop functions is not complicated, especially when you are already familiar with HTML and JavaScript. HTML5 provides a native drag and drop API that allows us to complete basic drag and drop interactions without relying on third-party libraries. Let’s take a look at a few key points to help you get started quickly.

What is the HTML drag and drop API?

HTML5 native Drag and Drop API allows users to "drag" elements with their mouse and "place" them to another location. This function is often used in scenarios such as file upload, element sorting, etc.

It mainly controls the dragging and drop process through a series of events, including dragstart , dragover , drop , etc. Understanding the role and order of triggering these events is the first step in using the API.

How to make an element draggable?

By default, only links, images, and some form elements are draggable. If you want custom elements (such as divs) to be dragged, you need to set properties:

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

Then bind the dragstart event to it, which tells the browser what to drag:

 document.querySelector('div').addEventListener('dragstart', function(e) {
    e.dataTransfer.setData("text/plain", e.target.id);
});

The most critical point here is to call setData() method to save the dragged data so that it can be obtained in the target area.

How to deal with dragging and dropping into the target area?

Next you need to specify one or more "delivery areas", which are places where dragged into content. The usual practice is to listen for dragover and drop events.

• dragover : The default behavior must be blocked, otherwise drop will not fire.
• drop : Get dragged data here and process it.

The sample code is as follows:

 const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', function(e) {
    e.preventDefault(); // The default behavior must be blocked});

dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    const data = e.dataTransfer.getData("text/plain");
    const draggedElement = document.getElementById(data);
    dropZone.appendChild(draggedElement);
});

A common mistake is to forget to block default behavior so that drag and drop content cannot be received correctly.

How to upload files by dragging and dropping?

If you want to support file drag-and-drop upload, such as letting users drag local files into web pages to upload, you need to use FileList object.

You can listen to drop events and get the file list from e.dataTransfer.files :

 dropZone.addEventListener('drop', function(e) {
    e.preventDefault();
    const files = e.dataTransfer.files;
    for (let i = 0; i < files.length; i ) {
        console.log(files[i].name); // Print file name}
});

This method is often used for functions such as image upload and document import. It should be noted that some browsers restrict access paths to certain types of files, so try to avoid directly reading file paths.

Basically that's it. After mastering these key steps, you can expand your functions according to your needs, such as adding visual feedback, supporting multiple selection drag and drop, etc. Although it seems a bit cumbersome, it is actually not difficult to do it step by step.

The above is the detailed content of Implementing Drag and Drop Functionality Using HTML APIs. For more information, please follow other related articles on the PHP Chinese website!