Home > Developer > Web Develop
HTML5 Code Case Study
HTML5 code has a id,id= "Tuo", there is a ondragstart= "drag (Event)" Property, then this is what the meaning of it, it is followed by a function drag (event), This means that the function is called when we start to drag, and we can see the dragstart here, which is the action that we started to drag and drop. Once we start to drag and drop, then in HTML5 we call the drag function, then where is this function, on top of which we write our own drag (EV).
function drag (EV)
{
Use
method to save the data to be dropped into the DataTransfer object
ev.effeallowed = ' all ';
Ev.dataTransfer.setData ("Text", ev.target.id);
}
What it calls, once we start dragging and dropping, we call this, and the data to drag and drop is stored in our DataTransfer object using the SetData method. It is important to note that this setdata, which is stored in this form to store SetData (data type, carrying data), that front is our data type, followed by our data. The data that carries here is the picture element we just dragged here. Let's save this picture element in the DataTransfer object.
When we have dragged the drag here, we can drag this img to this.
<div id= "Cun" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>
Go on up here. The above area allows us to store, dragged in pictures. Then it's those attributes. First we give it an ID, id= "cun", and then ondrop= "Drop" then it also has a function, then when this function is triggered, the other elements are dragged into this element, then we this white area of its one, such a storage area, When our icon is dragged into the saved area, we call the drop function.
So this function, what's inside it.
function Drop (EV)
{
Do not perform default processing (Deny drag and drop)
Ev.preventdefault ();
Use GetData () to get the data, and then assign the value to the
var data=ev.datatransfer.getdata ("Text");
Use the AppendChild method to place the dragged node in the element node as its child node
Ev.target.appendChild (document.getElementById (data));
}
First call Ev.preventdefault (); When it comes over, the first step is//do not perform default processing (refuse to drag and drop), then use our GetData () method to get to our datatransfer data, then assign it to data, And then we use the AppendChild method of the node we dragged, and put it in our element as its child node, then what is dragged and dropped into the node of the element to become its child node. So we can now see that we have this img and we have div before it is a sibling.
Drag the property below us, and write it into the existing div above to become the surviving child node.
This is one of the steps we drag and drop.
Full code
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script>
function AllowDrop (EV)
{
Do not perform default processing (Deny drag and drop)
Ev.preventdefault ();
Ev.dataTransfer.dropEffect = ' link '
}
function drag (EV)
{
Using SetData (data type, carrying data)
method to save the data to be dropped into the DataTransfer object
Ev.cleardata ();
ev.effeallowed = ' all ';
Ev.dataTransfer.setData ("Text", ev.target.id);
}
function Drop (EV)
{
Do not perform default processing (Deny drag and drop)
Ev.preventdefault ();
Use GetData () to get the data, and then assign the value to the
var data=ev.datatransfer.getdata ("Text");
Use the AppendChild method to place the dragged node in the element node as its child node
Ev.target.appendChild (document.getElementById (data));
}
</script>
<style>
#tuo {
Background: #e54d26;
width:540px;
height:320px;
}
#cun {
width:540px;
height:320px;
border:2px solid #D2D2D2;
box-shadow:1px 4px 8px #646464;
}
</style>
<body>
<div id= "Cun" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>
<br/>
</body>
HTML5 Drag-and-drop case detailed description
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
