HTML5 Drag and Drop drag effect

 HTML5 Drag and Drop The drag effect is a very important function of HTML5. Traditional HTML webpage design cannot drag webpage elements at will. In the development of HTML5, the new function of webpage element dragging has been realized. The so-called drag is to slide a webpage element. Drag the mouse to another location and drop it. This is a standard HTML5 rule. As long as the HTML5 Drag and Drop technique is used correctly, any web page element can achieve the drag effect. Most new versions of mainstream browsers support HTML5 Drag and Drop. .

HTML5 Drag and Drop drag effect example 1. Drag the image to the DIV block

<style type="text/css">
#Box1{
    width:200px;
    height:100px;
    padding:10px;
    border:1px #ccc dashed;
    float:left;
    margin-right:10px;
}
</style>
<script type ="text/javascript">
function AllowDrop(event){
    event.preventDefault();
}
function Drag(event){
    event.dataTransfer.setData("text",event.currentTarget.id);
}
function Drop(event){
    event.preventDefault();
    var data=event.dataTransfer.getData("text");
    event.currentTarget.appendChild(document.getElementById(data));
}
</script>
<div id="Box1" ondrop="Drop(event)" ondragover="AllowDrop(event)"></div>
<img id="Img1" src="Image URL" draggable="true" ondragstart="Drag (event)">
<div style="clear:both;"></div>

An example of a gameplay is to drag the green rectangular picture on the right to the pre-prepared dashed frame on the left. The Drag and Drop effect of HTML5 needs to use the syntax of HTML5 itself, and it must also be supported by JavaScript. Take the example 1 The main structure can be seen, we first prepare a DIV block (id="Box1"), and use basic CSS to design the size and border, and then prepare a picture (id="Img1"), set the picture to be dragged The effect and the attributes of the elements that can be placed in the DIV block are the concept of drag.

Step 1. First set the picture to set the

picture drag effect. The main process is to first turn on the draggable function of the picture, which is the "draggable="true"" part of Img1 in the example, and then when the dragging action is generated, a JavaScript will be triggered function, the name is Drag, and this part is the "ondragstart="Drag(event)" part of Img1.

Step 2. Start dragging (Drag)

Next, we will look at the function of Drag. "dataTransfer.setData" is the setting data of the element to be dragged. For the content of this example, it is to set the data type of Img1 to text. The data value is the id of the image, which is Img1, and these actions are executed when the drag starts.

Step three, start placing (Drop)

The third key point of drag effects is drop. The dotted DIV frame prepared in Example 1 is the place to place the picture. There are two key points in this DIV block, the first key point It is to open the "droppable element" function, because the default is not placeable, so the picture cannot be placed without opening it. The "ondragover="AllowDrop(event)" part of the DIV block is turned on. When When the drag action is executed on the block, the AllowDrop function will be triggered, and its content is to turn on the "dropable element" function. Then, when the drop action occurs, the Drop funtion is automatically triggered. This part is controlled by the "ondrop="Drop(event)"" of the DIV block. The content of the Drop function is to obtain the data of the dragged element and place it. , Through "event.dataTransfer.getData("text");" you can get the data set by setData when the picture is dragged. Once you have the data, you can use "event.currentTarget.appendChild(document.getElementById(data)); "Place the picture.

The above three steps are the process of dragging webpage elements from the beginning to the successful placement. This technique can not only drag the picture to a single place, the second example has made a little modification, so that the picture can be dragged to several different areas, Drag The concept of and Drop is the same.

HTML5 Drag and Drop drag effect example 2: Let the picture drag in different areas

<style type="text/css">
#Box2,#Box3,#Box4{
    width:200px;
    height:100px;
    padding:10px;
    border:1px #ccc dashed;
    float:left;
    margin-right:10px;
}
< /style>
<script type="text/javascript">
function AllowDrop(event){
    event.preventDefault();
}
function Drag(event){
    event.dataTransfer.setData("text",event.currentTarget.id);
}
function Drop(event){
    event.preventDefault();
    var data=event.dataTransfer.getData("text");
    event.currentTarget.appendChild(document.getElementById(data));
}
</script>
<div id="Box2" ondrop="Drop(event)" ondragover="AllowDrop(event)">
    <img id="Img2" src="Image URL" draggable="true" ondragstart="Drag(event)" >
</div>
<div id="Box3" ondrop="Drop(event)" ondragover="AllowDrop(event)"></div>
<div id="Box4" ondrop="Drop(event)" ondragover= "AllowDrop(event)"></div>
<div style="clear:both;"></div>

In the second example, there are three DIV blocks with different ids, in order to allow the dragged image to be placed in the correct area, because the drop function will obtain the DIV id according to the position of the dropped block. When we drag the image at will Putting in any DIV block, the Drop function has a way to judge, this is the effect of arbitrary dragging of web elements.

It may feel a bit complicated or tricky to learn HTML5 Drag and Drop drag effect at the beginning, but you can design many webpage special effects and new functions that could not be done before and improve the professionalism of overall webpage design. It is worth taking time to practice this. Kind of drag effects.

Supplement, since HTML5 Drag and Drop is a new feature, please consider whether the target group of the web page has already used the new version of the browser. Currently, the latest versions of FireFox, Chrome, Opera, and Safari all support HTML5 Drag and Drop. Special effects, and IE browser must be IE9 or above to have support.