HTML 5 drag and drop (Drag and drop)

Browser support

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

1. Set the label Draggable property to True.

2. Adding the Ondragstart property to the label invokes a function drag (event).

function drag (EV) {

Ev.dataTransfer.setData ("Text", ev.target.id); }//Set data type and value of dragged data

3. Call a function AllowDrop (event) to add the OnDragOver property to the location (target element) tag you want to drag and drop.

function AllowDrop (EV) {
Ev.preventdefault ();} Avoid browser-to-data default processing

4. Call a function drop (event) to add the OnDrop property to the location (target element) tag you want to drag and drop.

The drop event occurs when the dragged data is dropped.

function Drop (EV) {
Ev.preventdefault (); Avoid browser-to-data default processing
var data=ev.datatransfer.getdata ("Text"); Get the data that was dragged. The method returns any data that is set to the same type in the SetData () method.
Ev.target.appendChild (document.getElementById (data)); }//Append the dragged element to the target element

5. Examples are as follows:

<script type= "Text/javascript" >
function AllowDrop (EV) {
Ev.preventdefault (); }

function drag (EV) {
Ev.dataTransfer.setData ("Text", ev.target.id); }

function Drop (EV) {
Ev.preventdefault ();
var data=ev.datatransfer.getdata ("Text");
Ev.target.appendChild (document.getElementById (data)); }
</script>

<div id= "Div1" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" >

</div>
<div id= "Div2" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>

EXECUTE as follows:

We can drag and drop pictures back and forth in Div1 and Div2.

HTML 5 drag and drop (Drag and drop)