HTML5 Drag & Drop

I. Set Attributes

draggable="true"

Anchor tags with href attribute and img tags are draggable by default. Other tags need to set this attribute.

II. Events

• drag: An event frequently triggered by the dragged element when it is being dragged (triggered once every few hundred milliseconds)

• dragstart: An event triggered by the dragged element when dragging starts

• dragend: An event triggered by the dragged element when dragging ends

• dragover: An event frequently triggered by the drop zone element when the dragged element enters the drop zone (triggered once every few hundred milliseconds)

• dragenter: An event triggered by the drop zone element when the dragged element enters the drop zone

• dragleave: An event triggered by the drop zone element when the dragged element leaves the drop zone

• drop: An event triggered by the drop zone element when the dragged element is dropped in the drop zone

Note: drag and dragover are continuously triggered.

When dragging and dropping files into the browser, you need to preventDefault in the dragover and drop event handlers, because when dragging something from other software applications or files, especially images, the default behavior is for the browser to redirect the current page to the resource pointed to by the dragged element. Testing shows you must prevent default behavior in both event handlers.

Note: After the dragstart event is triggered, other elements' mousemove, mouseover, mouseenter, mouseleave, mouseout events will not be triggered.

Event trigger order:

dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

Event object:

DragEvent, inherits from [object MouseEvent] object, actually just adds a {DataTransfer} dataTransfer property.

Important properties of the event object:

The main purpose of effectAllowed and dropEffect is to configure the mouse pointer type during the drag operation to inform users what operations can be performed next; the secondary purpose is to control whether the drop event is triggered. When displaying the prohibited pointer style, the drop event of the target element cannot be triggered.

Note: effectAllowed can only be set in dragstart, and can only be set in dragover

For more information, please see HTML5 Magic Hall: Comprehensive Understanding of Drag & Drop API

III. Compatibility

findmebyip says drag is compatible with all browsers, but in reality, although IE was the first to implement drag, [IE10-] support is very low and can be ignored (only effective for selected text in img elements, a[href] elements, and input[type=text]/textarea elements, and doesn't require setting draggable="true", doesn't support file drag and drop).

IV. Transfer Data

Transferring data requires the event.dataTransfer object, which provides setData(type, data); and getData(type); methods to store and retrieve data.

Then use setData('text/plain', data) in the dragstart event handler (IE10 only supports text/plain), and getData('text') in the drop event handler.

Note: If the type doesn't exist, it will be appended to the end of the data list; if it already exists, it will replace the original content. So, not considering IE10, it's equivalent to setData(key, value);

V. File Drag and Drop

dropArea.ondragover = function(e) {
    e.preventDefault();
}
dropArea.ondrop = function(e) {
    e.preventDefault();
    
    var files = e.dataTransfer.files;
    if (files && files.length > 0) {
        // Output file information
        var str = '';
        for(var i = 0; i < files.length; i++) {
            var file = files[i];

            // Online image preview also requires uploading the image to the server first, because the client file URL cannot be obtained

            // To upload files, just send the file object via xhr directly
            // var formData = new FormData();
            // formData.append('myfile', file);
            // xhr.send(formData);
            console.log(file);
        }

        console.log('receive a file');
    }
}

There are many points to note about file drag and drop upload. The next blog post will introduce several common implementation methods in detail.

References

• HTML5 Magic Hall: Comprehensive Understanding of Drag & Drop API: Very comprehensive

• JS Magic Hall: IE5~9 Drag&Drop API: Drag and drop supported by [IE10-]

• HTML5 drag & drop Introduction