HTML5 CSS3 topic: Drag and Drop (Drag and drop)

Originally prepared to write a support multi-image drag-and-drop upload example, but in order to better understand, first introduce the HTML5 drag and drop.

Drag-and-drop (Drag and Drop) is part of the HTML5 standard.

Browser support

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

Dragged elements, Dragelement:

1. Add Event: ondragstart

2. Add attribute: dragable

Placing elements, Dropelement:

1. Add Event: Ondargenter, OnDragOver, OnDragLeave, Ondragend, OnDrop

And mouser into a kind of event is very similar, literally also very good understanding, do not repeat, below will use examples to illustrate.

1. Drag and drop between elements on the page

Here's a small example of a drag-and-drop between div to show how each event is triggered:

<! DOCTYPE html>
：

Take a look at the output from the console panel: observe when each event is triggered.
Several points to note:
The default behavior of an event must be organized in a, ondragover, and the data/element cannot be placed into other elements by default.
b, the default behavior of the drop event is to open as a link, so you also need to block its default behavior.
It is also possible to note that in the case of drag-and-drop, the event contains an Event.datatransfer object, in which we passed the ID of the dragged div using the SetData method of the object, and then took the ID in the drop and copied the element to the placed Div.
The following describes the other methods of the object:
Event.datatransfer:
 items = [Object Datatransferitemlist] @@ drag_drop.html:44 files = [object FileList] @@ drag_drop.html:44 types = Text/plain @@ drag_drop.html:44 effectallowed =all @@ drag_drop.html:44 dropeffect = none @@ drag_drop.html:44 cleardata = function cleardata () {[native code]} @@ drag_drop.html:44 getData = function GetData () {[native code]} @@ drag_drop.html:44 setData = function SetData () {[native code]} @@ drag_drop.html:44setdragimage = function setdragimage () {[native code]} @@
I used JS to print out all of its properties:
1, Getdata,setdata The above example has been used, ClearData is to clear the data set.
2, it is noteworthy that the files, when the operating system selected one or more file into the Div, files will store the information dragged into the file, and then we can get the file type, length, content and then upload.
3. Setdragimage (image, X, y) is used to set the mouse movement along with the mouse. Must be set in DragStart.
4, types,effectallowed and DropEffect are dragged into the type of elements, drag the process of mouse display style, I think can ignore these properties, generally not used.