concept:
Although before HTML5 can already be achieved using drag and drop mousedown, mousemove, mouseup, but only support drag and drop within the browser, and in HTML5, has been in the data between the browser and other applications that support drag each other, but also greatly simplifies the code-related aspects of drag and drop.
Drag and Drop implementation steps of:
(1) The dr0aggable attributes of the object element you want to drag and drop to true. Further img elements with a element (must be specified href) and drop allowed by default.
(2) the preparation and drag and drop related event-handling code.
application
Code
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> drag exemplary </ title>
<Script type = "text / JavaScript">
function the init ()
{
var = Source Document .getElementById ( "dragme");
var dest = document.getElementById ( "text");
// (. 1) and drop starts
source.addEventListener ( "dragStart", function (EV)
{
// the append data dataTransfer object
var dt ev.dataTransfer =;
dt.effectAllowed = 'All';
// (2) drag and drop elements dt.setData ( "text / Plain", this.id);
dt.setData ( "text / Plain", "hello ");
}, to false);
// (. 3) the dragend: end drag
dest.addEventListener ("the dragend ", function (EV)
{
// the default action is not performed
ev.preventDefault ();
}, to false);
// (. 4) drop: dragged and dropped
dest.addEventListener ( "drop", function (EV)
{
// retrieve data from objects DataTransfer where
var dt = ev.dataTransfer;
var text = dt.getData ( "text / Plain");
dest.textContent + = text;
// (. 5) does not perform the default operation
ev.preventDefault ();
// stop event propagation
ev.stopPropagation ();
}, to false);
}
// (. 6 ) setting page properties, the page operation is not performed
document.ondragover = function (E) {e.preventDefault ();};
document.ondrop = function (E) {e.preventDefault ();};
</ Script>
</ head >
<body the onload = "the init ()">
<h1 of> simple drag exemplary </ h1 of>
<div ID = "dragme" = draggable with "to true" style = "width: 200px; border: 1px Solid Gray;">
Drag and drop
</ div>
<div id ="text" style="width: 200px;height: 200px;border: 1px solid gray;">
</div>
</body>
</html>
effect
Precautions:
1. Initially the effect does not show, is back function (ev) added an extra function ")" symbols, and the document written docnment
2 write html code in HBuilder software, you can find the font is black is representative of error, especially pay attention!