# 14.拖拽接口, 实现常见拖拽效果
# 1.拖拽元素
ondrag 应用于拖拽元素, 整个拖拽过程都会调用--持续
ondragstart 应用于拖拽元素, 当拖拽开始时调用
ondragleave 应用于拖拽元素, 当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素, 当拖拽结束时调用
1
2
3
4
2
3
4
# 2.目标元素
ondragenter 应用于目标元素, 当拖拽元素进入时调用
ondragover 应用于目标元素, 当停留在目标元素上时调用
ondrop 应用于目标元素, 当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素, 当鼠标离开,目标元素时调用
1
2
3
4
2
3
4
# 3.使用注意
- 如果想要调用ondrop事件, 必须在 ondragover 中使用事件参数阻止浏览器的默认行为
thirdBox.ondragover = function (argument) {
// 在 ondragover 时, 必须阻止默认行为, 才能够看到拖放效果
argument.preventDefault();
}
1
2
3
4
2
3
4
# 4.效果
# 5.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 150px;
height: 200px;
border: 1px solid hotpink;
float: left;
margin-left: 20px;
}
.div2 {
width: 150px;
height: 200px;
border: 1px solid blue;
float: left;
margin-left: 20px;
}
p {
background-color: pink;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<!-- 在h5中， 如果想拖拽元素， 就必须为元素添加draggable="true" 图片和超链接就可以拖拽 -->
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div2" id="div3"></div>
<div class="div4" id="div4"></div>
<div class="div5" id="div5"></div>
<script>
// 学习拖拽，主要就是学习拖拽事件
var obj = null; //当前被拖拽的元素
// 应用于被拖拽元素的事件
// ondrag 应用于拖拽元素, 整个拖拽过程都会调用--持续
// ondragstart 应用于拖拽元素, 当拖拽开始时调用
// ondragleave 应用于拖拽元素, 当鼠标离开拖拽元素时调用
// ondragend 应用于拖拽元素, 当拖拽结束时调用
document.ondragstart=function(e){
// 通过事件捕获来获取被拖拽的子元素
e.target.style.opacity=0.5;
e.target.parentNode.style.borderWidth="5px";
obj=e.target;
// 通过dataTransfer来实现数据的存储和获取
// setData(format,data):
// format:数据的类型 text/html text/uri-list
// Data:数据 一般来说是字符串值
e.dataTransfer.setData("text/html", e.target.id);
}
document.ondragend=function(e){
e.target.style.opacity=1;
e.target.parentNode.style.borderWidth="1px"
}
document.ondragleave=function(e){
}
document.ondrag=function(e){
}
// 应用于目标元素的事件
// ondragenter 应用于目标元素, 当拖拽元素进入时调用
// ondragover 应用于目标元素, 当停留在目标元素上时调用
// ondrop 应用于目标元素, 当在目标元素上松开鼠标时调用
// ondragleave 应用于目标元素, 当鼠标离开,目标元素时调用
document.ondragenter=function(e){
console.log(e.target)
}
document.ondragover=function(e){
// 如果想触发ondrop事件， 那么必须在这个位置阻止浏览器的默认行为
e.preventDefault();
}
// 浏览器默认会阻止ondrop事件： 我们必须在ondragover中阻止浏览器的默认行为
document.ondrop=function(e){
// 添加被拖拽元素到当前目标元素
// e.target.appendChild(obj);
// 通过e.dataTransfer.setData存储的数据，只能在drop事件中获取
var id=e.dataTransfer.getData("text/html");
// console.log(id);
e.target.appendChild(document.getElementById(id))
}
document.ondragleave=function(e){
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96