Home > Developer > Web Develop
<! DOCTYPE html>
<script type= "Text/javascript" >
function AllowDrop (EV)
{
Ev.preventdefault ();
}
function drag (EV)
{
Ev.dataTransfer.setData ("Text", ev.target.id);
}
Then, specify what happens when the element is dragged.
In the example above, the Ondragstart property invokes 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 Drop (EV)
{
The OnDragOver event specifies where to place the dragged data.
By default, data/elements cannot be placed in other elements. If you need to set allow placement, we must block the default handling of elements.
This is done by invoking the event for OnDragOver events. Preventdefault () Method:
Ev.preventdefault ();
var data=ev.datatransfer.getdata ("Text");
Ev.target.appendChild (document.getElementById (data));
}
</script>
<body>
<div id= "Div1" ondrop= "Drop (event)"
Ondragover= "AllowDrop (event)" ></div>
First, to make an element draggable, set the Draggable property to True:
ondragstart= "Drag (Event)" Width= "336" height= ""/>
</body>
HTML5 Drag and drop instance
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
