Home > Developer > Web Develop
Html5 drag and drop
1) create a source project
1.1) value of the draggable attribute:
True -- this element can be dragged;
False -- the element cannot be dragged;
Auto-the browser can decide whether an element can be dragged;
1.2) events of the dragged element:
Dragstart -- triggered when the element is dragged;
Drag-triggered repeatedly when an element is dragged;
Dragend -- triggered when the drag operation is complete;
2) create a release zone
2.1) release zone event:
Dragenter -- triggered when the dragged element enters the screen space occupied by the release area;
Dragover -- triggered when the dragged element is triggered in the release zone;
Dragleave -- triggered when the dragged element leaves the release zone if it is not put;
Drop -- triggered when the dragged element is put down in the release area;
<!DOCTYPE HTML>3) use the DataTransfer object3.1) the object distributed together with the event triggered by the drag-and-drop operation is DragEvent, which is derived from MouseEvent.
Additional attributes defined by the DragEvent object:
DataTransfer -- returns the object used to transmit data to the release zone (DataTransfer );
3.2) properties defined by the DataTransfer object:
Types -- format of the returned data;
GetData (<format>) -- return data in the specified format;
SetData (<format >,< data>) -- sets data in the specified format;
ClearData (<format>) -- remove data in the specified format;
Files -- returns the list of dragged files;
<!DOCTYPE HTML>3.3) drag and drop files:Attributes defined by the File object
Name -- get the file name;
Type -- get the file type, expressed as MIME;
Size -- get the file size (in bytes );
<!DOCTYPE HTML>
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
