1) Create a source project
1.1) The value of the Draggable property:
true--This element can be dragged;
false--This element cannot be dragged;
auto--Browser can decide whether an element can be dragged or not;
1.2) The event of the element being dragged:
The dragstart--is triggered when the element starts being dragged;
drag--is triggered repeatedly when an element is dragged.
dragend--is triggered when the drag operation is complete;
2) Create a release area
2.1) Release Zone event:
dragenter--is triggered when the dragged element enters the screen space occupied by the release area;
dragover--move trigger When the dragged element is triggered in the release area;
dragleave--is triggered when the dragged element is not placed and leaves the release area;
drop--is triggered when the dragged element is dropped in the release area.
<! DOCTYPE html>3) using the DataTransfer object3.1) The object dispatched at the same time as the event triggered by the drag-and-drop operation is dragevent, which is derived from MouseEvent.
Additional properties defined by the Dragevent object:
datatransfer--returns the object used for data transfer to the release area (DataTransfer);
3.2)DataTransfer the properties defined by the object:
types--returns the format of the data.
GetData (<format>)-returns data in the specified format;
SetData (<format>,<data>)--Sets the data in the specified format.
ClearData (<format>)-removes data from the specified format.
files--Returns a list of files that have been dragged.
<! DOCTYPE html>3.3) Drag and drop files:Properties defined by the file object
name--gets the file name.
type--gets the file type. expressed as MIME type;
size--Gets the file size (in bytes);
<! DOCTYPE html>
Drag and drop of HTML5