Talking about HTML5 drag and drop

Now, there are a lot of new HTML5 elements, but also a lot of convenience for developers, such as: Structure tag header, nav, arctile, section, footer form elements: URL, date, emaile, search, tel, range, Color, DataList, progress, meter, output, and so on, there are some webstroge elements, drawing elements, drag-and-drop APIs, and so on, here is a focus on the drag-and-drop API.

In life, we often drag and drop desktop application elements from one place to another, developers do not have a standard technology to achieve this, the HTML5 standard introduced drag-and-drop API to achieve this function, in the drag-and-drop API, some events are (source element) Drag and drop elements triggered, Other events are triggered by elements that are served by the (target element), and the source element events are as follows:

DragStart: This event is triggered when the drag is started

Drag: triggered when a source element is dragged, similar to the MouseOver event

Dragend: The source element triggers this event when the drag operation is complete

The target element event is as follows:

DragEnter: During a drag operation, this event is triggered when the mouse pointer enters the target area for the first time.

DragOver: Fires when an object is dragged to the target object

Drop: The target element triggers this event when the drag operation is running within the target element

DragLeave: Triggered when a drag object leaves the target object during drag

I always feel, with dictation can not clearly express the meaning, or to a small code, more understanding, the code in the HTML is as follows:

<div id= "LT" >
<!--source Elements--

</div>
<!--target Elements--
<DIV id= "RT" ></div>

Two div boxes have been set up, but we haven't dressed them yet, so at this point, we need the CSS to play, the CSS code is as follows:

#lt {
width:300px;
height:200px;
BORDER:1PX solid black;
padding:20px;
Float:left;

margin-right:20px;

}
#rt {
width:300px;
height:200px;
BORDER:1PX solid black;
padding:20px;
Float:left;

}

In addition, this is just to show our static page, but to achieve drag and drop, of course, we have JS, JS code as follows:

<script>
Get source Element
var img = document.getElementById ("img");
Bind drag Event-default allowable trigger
Img.ondragstart = function (event) {
Console.log (Event.datatransfer);

var trans = Event.datatransfer;
Trans.setdata ("text", EVENT.TARGET.SRC);

trans.effectallowed = "Move";
Console.log ("Drag and Drop Start");
}
Img.ondrag = function (event) {
Console.log ("During the dragging process ...");
}
Img.ondragend = function (event) {
Console.log ("End drag ...");
var lt = document.getElementById ("LT");
Lt.removechild (Event.target);
}
Get target Element
var RT = document.getElementById ("RT");
binding target Element Events
Rt.ondragenter = function (event) {
Console.log ("first entry to target area ...");
}
Rt.ondragover = function (event) {
Event.preventdefault ();
Console.log ("Drag and drop to target object rom!...");
}
Rt.ondrop = function (event) {
Console.log ("Put in ...");
var trans = Event.datatransfer;
var src = trans.getdata ("text");
rt.innerhtml = "

Trans.cleardata ("text");
}
Rt.ondragleave = function (event) {
Console.log ("The entire drag-and-drop process is over ...");
}
</script>

When the browser is running, open the console can see the entire drag and drop process Oh, the page began to effect the following:

Use the mouse to drag and drop the effect of the process such as:

After drag and drop the effect is as follows:

Well, the simple HTML5 drag and drop to this end, I hope you give more advice oh.

Talking about HTML5 drag and drop