Home > Developer > Web Develop
Feeling drag and pull is very interesting, just start playing, simple summary, there is nothing wrong place welcome correct, thank you for further updates
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<style>
. square{
width:200px;
height:200px;
Background: #079cda;
}
#box, #box2 {
width:300px;
height:300px;
border:1px solid red;
Display:inline-block;
}
</style>
<body>
<div id= "box" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div> <!--box 1-->
<div id= "Box2" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div><!--box 2-->
<div id= "Figrue" draggable= "true" ondragstart= "Drag (Event)" class= "Square" ></div> <!--Graphics--
</body>
<script>
function AllowDrop (EV)
{
Ev.preventdefault (); Block Default Events
}
function drag (EV)
{
Ev.dataTransfer.setData ("Text", ev.target.id); Get the ID of the graphic you want to drag and keep
}
function Drop (EV)
{
Ev.preventdefault ();
var data=ev.datatransfer.getdata ("Text"); Get the data
Ev.target.appendChild (document.getElementById (data)); Adding data to a node
}
Summary: ondragstart Start Drag events ondrop add dragged elements to the node OnDragOver block default events
</script>Simple summary of 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
