in HTML5, the drag-and-drop API is supported, which allows the data to be dragged and dropped between the browser and other applications, and it is necessary to go through two steps to do so.
(1) Set the Draggable property of the object label you want to drop to true. In order to drag and drop the label, the IMG tag and a tag must be specified as true, and the default allows drag and drop.
(2) write event-handling code related to drag-and-drop, commonly used to play the following events:
DragStart Start a drag-and-drop operation
drag during the drag-and-drop process
DragEnter The dragged label begins to enter the scope of this label
DragOver The dragged label is moving within the scope of this label
DragLeave the dragged label away from the scope of this label
Drop has other tags that are dragged and dropped onto this tab
Dragend Drag-and-drop operation ends
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Drag and Drop </title>
<script type= "Text/javascript" >
function init ()
{
(1) Drag and drop start
Source.addeventlistener ("DragStart", function (EV)
{
(1) Append data to the DataTransfer object
var dt = Ev.datatransfer;
dt.effectallowed = ' all ';
(2) Drag element is Dt.setdata ("Text/plain", this.id);
Dt.setdata ("Text/plain", "Hello");
}, False);
(3) Dragend: End of drag and drop
Dest.addeventlistener ("Dragend", function (EV)
{
Do not perform default processing (Deny drag and drop)
Ev.preventdefault ();
}, False);
(4) Drop: Drag and drop
Dest.addeventlistener ("Drop", function (EV)
{
Get data from DataTransfer object
var dt = Ev.datatransfer;
(5) Do not perform default processing (Reject drag and drop)
Ev.preventdefault ();
Stop event Propagation
Ev.stoppropagation ();
}, False);
}
</script>
<body onload= "init ()" >
In the code above, the Inint () event is automatically triggered when the page loads. The event includes drag-and-drop start, drag-and-drop and end-drag-and-drop three functions. Open the page in a browser, drag the mouse to display the evening pictures in the Web page, the page will automatically load the content.
HTML5 implementing Drag and drop