HTML5 Drag and Drop, html5drag
Drag and drop is an integral part of the HTML5 standard.
Drag the w3cschool icon to the rectangle.
Drag and DropDrag and Drop is a common feature, that is, to drag an object to another position after it is captured.
In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.
Browser supportInternet Explorer 9 +, Firefox, Opera, Chrome, and Safari support dragging.
Note:Safari 5.1.2 does not support drag.
HTML5 drag-and-drop instancesThe following example shows a simple drag-and-drop instance:
Instance
<! Doctype html>
<Html>
<Head>
<Script>
Function allowDrop (ev)
{
Ev. preventDefault ();
}
Function drag (ev)
{
Ev. dataTransfer. setData ("Text", ev.tar get. id );
}
Function drop (ev)
{
Ev. preventDefault ();
Var data = ev. dataTransfer. getData ("Text ");
Ev.tar get. appendChild (document. getElementById (data ));
}
</Script>
</Head>
<Body>
<P id = "p1" ondrop = "drop (event )"
Ondragover = "allowDrop (event)"> </p>
Ondragstart = "drag (event)" width = "336" height = "69">
</Body>
</Html>
It may seem a little complicated, but we can study the different parts of drag-and-drop events separately.
Set the element to drag and dropFirst, set the draggable attribute to true to make the element drag:
Then, specify what will happen when the element is dragged.
In the preceding example, the ondragstart attribute calls a function, drag (event), which specifies the data to be dragged.
The dataTransfer. setData () method sets the data type and value of the dragged data:
Function drag (ev)
{
Ev. dataTransfer. setData ("Text", ev.tar get. 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-ondragoverThe ondragover event specifies where to place the dragged data.
By default, data/elements cannot be placed in other elements. To allow placement, We must block the default Processing Method for elements.
You need to call the event. preventDefault () method of the ondragover event:
Event. PreventDefault ()
A drop event occurs when data is dragged.
In the above example, the ondrop attribute calls a function, drop (event ):
Function drop (ev)
{
Ev. preventDefault ();
Var data = ev. dataTransfer. getData ("Text ");
Ev.tar get. appendChild (document. getElementById (data ));
}
Code explanation:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
