An introduction to the &drop event of HTML5 's drag-and-drop drag

Drag-and-drop (Drag &drop) is a common feature that crawls objects and then drags them to another location. In HTML5, drag-and-drop is part of the standard, and any element can be dragged and dropped. In the past, we used to monitor the mouse MouseDown, Mouseove, MouseUp and other events to constantly get the coordinates of the mouse to modify the location of the elements, and now HTML5 the original drag &drop event (DnD), a lot of convenience, but also improved performance.
View Demo Download source code
Internet Explorer 9+, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.
How to enable an object to be dragged
To enable the element to be dragged, set the Draggable property to True:

<div draggable= "True" > Drag div</div>

Note: In most browsers, A and IMG elements can be dragged and dropped by default, but for the sake of insurance, it is best to add the draggable attribute.
Drag events

DragStart: Triggers when a page element starts dragging.
Drag: The dragged element continues to fire during the drag process.
DragEnter: The dragged element is triggered when it enters the target element, and the event should be monitored on the target element.
DragLeave: Triggered when the dragged element leaves the target element, the event should be monitored on the target element.
DragOver: Constant triggering when the dragged element stays in the target element and should listen for the event on the target element.
Drap: A file that is dragged or selected from the file system, and is triggered when dropped and dropped.
Dragend: Triggers when the page element drags at the end.
Note: All of these events can specify a callback function.
DataTransfer objects
In the drag procedure, the callback function accepts an event argument with a DataTransfer property. It points to an object that contains various information related to the drag.
Draggableelement.addeventlistener (' DragStart ', function (event) {
Event.dataTransfer.setData (' text ', ' Helloweba ');
});
The above code stores a text message on the DataTransfer object, "Helloweba," when the drag begins. When the drop ends, you can use the GetData method to remove the message.
Properties of the DataTransfer object:
Effectallowed: Specifies the allowed actions, the possible values are copy, move, link, copylink, Copymove, Linkmove, all, none, and uninitialized (default, equivalent to all, That allows everything to be done).
Files: Contains a FileList object that represents the files involved in drag-and-drop, primarily for handling files dragged from the file system into the browser.
Types: The type of data stored in the DataTransfer object.
Ways to DataTransfer objects:
SetData (format, data): stores data on a DataTransfer object. The first parameter format specifies the type of data to be stored, such as text, URL, text/html, and so on.
GetData (format): Extracts data from a DataTransfer object.
ClearData (format): Clears the data stored by the DataTransfer object. If the format parameter is specified, only the data in that form is cleared, otherwise all data is cleared.
Setdragimage (imgelement, X, y): Specifies the image that is displayed during the drag. By default, many browsers display a semitransparent version of a dragged element. Parameter imgelement must be an image element, not a path to the image, and parameters x and y represent the position of the image relative to the mouse.
The DataTransfer object allows data to be stored on it, which makes it possible to transfer information between the dragged element and the target element.
Instance Code
In the example, we set the element to drag from one box to another box element.
The HTML structure is as follows:
<ul id= "Drags" >
<li draggable= "true" >A</li>
<li draggable= "true" >B</li>
<li draggable= "true" >C</li>
</ul>
<ul id= "Drops" ></ul>
#drags是被拖动的对象盒子, #drops是目标区域盒子.
JavaScript code:
<script type= "Text/javascript" >
Get target Element
var target = document.queryselector (' #drops ');
Get the elements you want to drag and drop
var dragelements = Document.queryselectorall (' #drags li ');
Temporarily record the dragged element
var elementdragged = null;
Circular listening for drag-and-drop events for dragging-and-dropping elements
for (var i = 0; i < dragelements.length; i++) {
Start drag-and-drop event monitoring
Dragelements[i].addeventlistener (' DragStart ', function (e) {
Set data parameters for the current drag-and-drop element
E.datatransfer.setdata (' text ', this.innerhtml);
Saves the current drag-and-drop object
Elementdragged = this;
});
End drag-and-drop event monitoring
Dragelements[i].addeventlistener (' Dragend ', function (e) {
Unregister the current drag-and-drop object
elementdragged = null;
});
}
The target element listens for drag-and-drop elements into the event
Target.addeventlistener (' DragOver ', function (e) {
Block browser default behavior
E.preventdefault ();
Set Mouse style
E.datatransfer.dropeffect = ' move ';
return false;
});
Target element listener when dropped element drop time event
Target.addeventlistener (' Drop ', function (e) {
Block default behavior
E.preventdefault ();
Block default behavior
E.stoppropagation ();
Gets the stored data parameters of the currently dragged element
var text = e.datatransfer.getdata (' text ');
Building elements
var node=document.createelement ("Li");
var textnode=document.createtextnode (text);
Node.appendchild (Textnode);
This.appendchild (node);

 //Deletes the dragged element
 document.queryselector (' #drags '). RemoveChild (elementdragged);    
 return false;
};
</script>
Note that we want to invoke preventdefault () to avoid the browser's default handling of the data (the default behavior of the drop event is to open as a link), in addition, by Datatransfer.getdata (" Text ") method to obtain the dragged data. This method returns any data that is set to the same type in the SetData () method. The
finally combines the file Api to obtain a local drag-and-drop file. FileReader is dedicated to reading files, according to the definition of the FileReader interface "provides some ways to read files and an event model that contains read results