When it comes to drag and drop, we’re all familiar with that, what about drag and drop? A word difference, on behalf of the meaning is not the same, drag is to pull away, drag and drop is to drag, there are put, we all know the shortcomings of native JS drag effect: 1. The code is relatively complex and redundant. 2. Drag and drop is limited to elements within the browser. 3
Therefore, drag and drop technology appears in H5, and HTML5 drag-and-drop advantages compared to JS native:
H5 drag-and-drop technology, Drag&drop, support for browsers:
Drag-and-drop is supported in Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5. Note: Drag and drop is not supported in Safari 5.1.2.
So what API syntax does it have? Let’s look at it:
1. Draggable property
Draggable tells the browser which elements need to be dragged. There are three optional values:
True: Elements can be dragged
False: Elements cannot be dragged
Auto: The browser determines whether elements can be dragged or not (default)
Object drag and drop events
Dragstart: Triggered when the mouse button is pressed and the movement begins
Drag: triggers —- continuously during element drag similar to mousemove
Dragend: Triggered when element drag stops
3. Event process of the launching area
When the element is dragged to a valid drop target, the following events occur in sequence:
1). Dragenter: triggered when the drag object enters the drop area
2). Dragover: Continues to trigger when the drag object is moved in the drop area
3). Dragleave: Triggered when an element is dragged out of the drop area
4). Drop: triggered when the drop object is dropped in the drop area
While all elements support placing target events, these elements are not allowed to be placed by default and need to override the default behavior of the event, for example:
Be sure to preventDefault() in onDragover otherwise onDrop will not be triggered
4. DataTransfer object — common method
SetDragImage (icon, X offset, Y offset)
Specifies an icon that appears below the cursor when a drag occurs
5. DataTransfer object — Common attributes:
DropEffect indicates which drop behavior the dragged element can perform
Possible values:
“None” : Cannot place dragged elements here
“Move” : Moves the dragged element to the place target
“Copy” : Copies the dragged element to the drop target
“Link” : Place target to open dragged element (with URL)
Effectalhoward which dropEffect allows you to drag elements
Allowed values:
CopyLink: dropEffect of copy and link allowed values
CopyMove: dropEffect whose allowed values are copy and move
LinkMove: dropEffect whose allowed values are link and move
“All” : allows any dropEffect
Note: The dropEffect property is set with the Effectalhoward property using the Effectalhoward property set in the dragstart event handler and the dropEffect property set in the dragover event handler Each possible value of causes the cursor to display as a different symbol
6. Files
Datatransfer. files: Returns a FileList of the files being dragged if it is a drag-and-drop file
FileReader: Dedicated to reading files, the FileReader interface provides methods for reading files and an event model containing the read results
Filereader. readAsDataURL method: Takes the file object to read and reads the file as DataUrl
Filereader. onload: This event is triggered when the file has been read successfully. After this event is triggered, you can retrieve the file data from this.result, or if it is an image, it will return base64 image data.
The above is the API provided by drag and drop, very many, you can arbitrarily set the effect of drag and drop events, drag events, we are more common garbage can effect, drag sorting, using H5 drag and drop technology will be very simple.