HTML5 CSS3 topic: Drag and Drop)

I was going to write an example that supports drag and drop upload of multiple images. But for better understanding, I would like to introduce the drag and drop of HTML5.

Drag and drop is an integral part of the HTML5 standard.

Browser support

Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

Dragged element, dragElement:

1. Add an event: ondragstart

2. Add a property: dragable

Placement element, dropElement:

1. Add events: ondargenter, ondragover, ondragleave, ondragend, ondrop

It is very similar to the one-class events that are categorized into one category by kms, which are both literal and understandable. If you do not describe them in detail, the following example will be used to describe them.

1. Drag and Drop between elements on the page

The following uses a small example: drag and drop between divs to show how events are triggered:

<! DOCTYPE html> 

:



Pay attention to the output of the console panel: observe when each event is triggered.
Notes:
A. The default action of an event must be organized in ondragover. By default, data/elements cannot be placed in other elements.
B. The default behavior of the drop event is opened in the form of a link, so you also need to prevent its default behavior.
It may also be noted that, during drag-and-drop, the event contains an event. dataTransfer object. In the previous example, we used the setData method of this object to pass the id of the drag div, and then obtained the id from drop, and copied the element to add it to the placed div.
The following describes other methods for this object:
Event. dataTransfer:

Objects = [object files] @ users: 44 files = [object files] @ users: 44 documents = text/plain @ users: 44 documents = all @ users: 44 documents = none @ users: 44 clearData = function clearData () {[native code]} @ response: 44 getData = function getData () {[native code]} @ response: 44 setData = function setData () {[native code]} @ drag_drop.html: 44 setDragImage = function setDragImage () {[native code]} @



I printed all its attributes using js:
1. getData and setData are used in the preceding example. clearData is used to clear the set data.
2. It is worth noting that when one or more files selected in the operating system are dragged into the div, files will store the information of the files, then we can get the type, length, and content of the file through file and then upload it.
3. setDragImage (image, x, y) is used to set the movement of the mouse along with the mouse. It must be set in dragstart.
4. types, effectAllowed, and dropEffect are the types of drag elements. The style displayed by the mouse during the drag process can be ignored and generally unavailable.