How to implement element dragging in HTML5_html5 tutorial skills-H5 Tutorial-php.cn

How to implement element dragging in HTML5_html5 tutorial skills

WBOY

Release： 2016-05-16 15:51:44

Original

1606 people have browsed it

Many front-ends probably don’t understand how to implement HTML5 drag and drop. This article gives you some ideas. Organize and back up files for easy reference later.

First example:

index.html

XML/HTML CodeCopy content to clipboard

>
<html>
<head>
<meta charset="UTF-8">
<title>Dragtitle>
<style>
.box{
width: 400px;
height: 400px;
float: left;
}
#box1{
background: #CCC;
}
#box2{
background: #FF0;
}
style>
head>
<body>
<div id="box1" class="box">div>
<div id="box2" class="box">div>
<img src="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />

JavaScript Code复制内容到剪贴板

"app1.js">
app1.js
/**
* app1.js
*/
var oBox1,
oBox2,
oImg1;
window.onload = function(){
oBox1 = document.getElementById('box1');
oBox2 = document.getElementById('box2');
oImg1 = document.getElementById('img1');
//
oBox1.ondragover = oBox2.ondragover = function(e){
e.preventDefault();
};
//
oImg1.ondragstart = function(e){
e.dataTransfer.setData('text', e.target.id);
};
oBox1.ondrop = dropImg;
oBox2.ondrop = dropImg;
};
function dropImg(e){
e.preventDefault();
var tempImg = document.getElementById(e.dataTransfer.getData('text'));
e.target.appendChild(tempImg);
}

Involving knowledge points

The following events will be triggered during the drag and drop process:
Trigger an event on the drag target (source element)
ondragstart - the user starts dragging the element Triggered when
ondrag - Triggered when the element is being dragged
ondragend - Triggered after the user has finished dragging the element

Event triggered when the target is released
ondragenter - This event is triggered when the object dragged by the mouse enters its container scope
ondragover - When an object is dragged This event is triggered when the dragged object is dragged within the container range of another object
ondragleave - This event is triggered when the object being dragged by the mouse leaves the container range
ondrop - During a dragging process, This event is triggered when the mouse button is released

event object (replaced by e)

e.target

The explanation on W3Cschool is: Return the element that triggered this event (the target node of the event). This target attribute is only compatible with ie9 and above

e.preventDefault()

Cancel the default action of the event.

e.dataTransfer.setData()

Set the data type and value of the dragged data:

Copy the code

The code is as follows:

e. dataTransfer.setData("Text",ev.target.id); //The first parameter is Text (lowercase is also acceptable)

e.dataTransfer.getData()

Get the dragged data:

Copy the code

The code is as follows:

e.dataTransfer.getData( "Text");