Home > Developer > Web Develop
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<script>
function AllowDrop (EV) {//ondragover event specifies where to place dragged data and drag into div move behavior
Ev.preventdefault ();//The default event block for the element
}
function drag (EV)//Drag behavior
{
Ev.dataTransfer.setData ("Text", ev.target.id);//setdata is assigning data in the specified format to datatransfer,ev.target refers to the incoming object
}
function Drop (EV)//Data release behavior
{
Ev.preventdefault ();//default event blocking processing for elements
var data=ev.datatransfer.getdata ("Text");//getdata is a value obtained from DataTransfer or clipboarddata
Ev.target.appendChild (document.getElementById (data));//appendchild is append, data
}
</script>
<body>
<div id= "Div1" ondragstart= "Drag (Event)" draggable= "true" style= "width:200px; height:150px; background:red; " ></div>
<!--draggable= "True" is set to a script that can be dragged and ondragstart run at the beginning of the drag operation. -
<div id= "Div2" ondrop= "Drop" (event), "Ondragover=" AllowDrop (event), "style=" width:100%; height:600px; border:1px solid #ffff00; " ></div>
</body>
HTML5 Drag and drop
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
