Drag and drop of HTML5

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 while the element is being dragged;

dragend--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--triggered when the dragged element is lowered in the release area;

<! DOCTYPE html>3) using the DataTransfer object
3.1) The object that is 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 to transmit data 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>)--Set the data in the specified format;
ClearData (<format>)-removes data from the specified format;
files--Returns the list of files that have been dragged;   
<! DOCTYPE html>3.3) Drag and drop files:
Properties defined by the file object
name--get the file name;
type--gets the file type, expressed in MIME type;
size--Gets the file size (in bytes);
<! DOCTYPE html>
 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Drag and drop of HTML5