Introduction to HTML 5 drag-and-drop

Drag-and-drop (Drag and drop) is an integral part of the HTML5 standard.

Drag and drop

Drag-and-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.

Browser support

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

Note: Drag-and-drop is not supported in Safari 5.1.2.

HTML5 drag-and-drop instance

The following example is a simple drag-and-drop instance:

Instance

<! DOCTYPE html>
 
Give it a shot yourself.
 
It may seem a bit complicated, but we can study different parts of the drag-and-drop event separately.
 
To set the element as drag-and-drop
 
First, for the element to be dragged, set the Draggable property to True:
 
 
What to drag-ondragstart and SetData ()
 
Then, specify what happens when the element is dragged.
 
In the above example, the Ondragstart property invokes a function, drag (event), which prescribes the data being dragged.
 
The Datatransfer.setdata () method sets the data type and value of the dragged data:
 
function drag (EV)
{
ev.dataTransfer.setData ("Text", ev.target.id);
}
 
In this example, the data type is "Text", and the value is the ID ("DRAG1") of the element that can be dragged.
 
Where to put it-ondragover
 
The OnDragOver event stipulates where the dragged data is placed.
 
By default, data/elements cannot be placed into other elements. If you need to set up allow placement, we must block the default handling of the element.
 
This is done by calling the Event.preventdefault () method of the OnDragOver event:
 
Event.preventdefault ()
 
Proceed to placement-OnDrop
 
Drop events occur when you drop the data.
 
In the example above, the OnDrop property calls a function, drop (event):
 
function Drop (EV)
{
ev.preventdefault ();
var data=ev.datatransfer.getdata ("Text");
Ev.target.appendChild (document.getElementById (data));
}
 
Code Explanation:
 

 

 
  
 
   
Call Preventdefault () to avoid default processing of the data by the browser (the default behavior of the drop event is to open as a link)
 
   
The dragged data is obtained by means of the Datatransfer.getdata ("Text") method. This method returns any data that is set to the same type in the SetData () method.
 
   
Dragged data is the ID of the dragged element ("Drag1")
 
   
Appends the dragged element to the drop element (the target element)