The drop event is a key step in the HTML5 drag and drop API, used to get drag and drop data and process interactions. 1. The default behavior needs to be blocked in the dragover event to trigger the drop; 2. Read text, links or HTML content through event.dataTransfer.getData(); 3. Use dataTransfer.files to get the dragged file object; 4. Optionally add style feedback through the dragenter and dragleave events to improve the user experience.

Drag and drop operations are common in web development, such as uploading files, sorting lists, or moving elements. HTML5 native Drag and Drop API provides basic support, where drop events are a key part of the entire process. Only by handling this event can you truly complete the data transmission and interaction.

The role of drop event

When the user drags a draggable element (such as a div or image) to the target area and releases the mouse, drop event is triggered. This is the most important step in the entire drag-and-drop process, because only in this event can you get the drag-in data and decide what to do with it.

It should be noted that drop event will not take effect by default unless you block the browser's default behavior in the previous dragover event:

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

Get drag data

In the drop event, you can access the dragged data through event.dataTransfer . This object contains all the dragged information, such as text, URL, file, etc.

A common practice is to use getData() method to read data in a specific format, such as:

 element.addEventListener('drop', function(e) {
    e.preventDefault();
    const text = e.dataTransfer.getData("text/plain");
    console.log("The text dragged over is:", text);
});

If you are dragging a link, it may be in the "text/uri-list" format; if it is HTML content, you may need to use "text/html" . The data formats from different sources are different and need to be judged based on actual conditions.

• Text content is usually used as "text/plain"
• The link is usually "text/uri-list"
• The HTML snippet is "text/html"

Process drag and drop files

In addition to text, in many scenarios, users will directly drag files into web pages, such as uploading avatars or importing documents. At this time, you can get the file object from dataTransfer.files :

 element.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);
        // Here you can continue to use FileReader to read file content}
});

This method is particularly suitable for drag-and-drop upload function. Note that files is an array object of class, so you need to access it with index. You cannot directly.forEach .forEach() , but you can use Array.from() to convert it into an array and then process it.

Drag style feedback (optional but recommended)

Although it is not necessary, giving users some visual feedback during the dragging process will improve the experience. For example, change the border color or background color of the target area to let the user know that this place can be placed.

You can add or remove a CSS class from dragenter and dragleave events:

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

dropZone.addEventListener("dragenter", () => {
    dropZone.classList.add("highlight");
});

dropZone.addEventListener("dragleave", () => {
    dropZone.classList.remove("highlight");
});

This way, users can see obvious prompts when dragging, improving usability.

Basically that's it. Just remember a few key points: first block the default behavior of dragover , then listen to drop , and then read data or files according to your needs. Not complicated but it is easy to ignore details, especially data format and event order.

The above is the detailed content of Handling drop events in the HTML5 Drag and Drop API.. For more information, please follow other related articles on the PHP Chinese website!