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