HTML5 drag function drag_html/css_WEB-ITnose

1. Create a drag object
Set the draggable attribute to the element that needs to be dragged. It has three values:
true: the element can be dragged;
false: The element cannot be dragged;
auto: The browser determines whether the element can be dragged.

2. Handle drag events
Drag events will be triggered when we drag an object, including:
A.dragstart: triggered when an element starts to be dragged;
B.drag: Triggered during the dragging process of the element;
C.dragend: Triggered when the dragging of the element ends

3. Create a delivery area

①When the dragged object enters the delivery area Relevant events will be triggered

A.dragenter: Triggered when the drag object enters the drop area; B.dragover: Triggered when the drag object moves within the drop area; C.dragleave: The drag object is not dropped Triggered when arriving at the drop area and leaving the drop area;
D.drop: Triggered when dragging the object and dropping it in the drop area.

②Note: dragenter and dragover may be affected by the default event, so we use e.preventDefault(); in these two events to prevent the default event

4 .Use dataTransfer to transfer data
When we need to drag an object to transfer data to the drop area, dataTransfer has the following attributes and methods:

1.types: the format of the returned data; 2.getData( ): Return data in the specified format; 3.setData(, ): Set data in the specified format;
4.clearData(): Remove data in the specified format; 5.files: Returns the information array of the files that have been placed. 1.type: file type
2.size: file size
3.name: file name

Programming example: