最近学了的一些关于拖拽的一些案例，原来的认识太过浅薄，所以以多个案例说明一下
目标导航
1，拖放事件
源对象
过程对象
目标对象
2，dataTransfer对象
setData（name，data） 存储数据
getData（name） 获取存储名字为“name”的数据
clearData（name） 清除dataTransfer存储的数据
setDragImage（element，x，y） 通过img元素设置拖放图标
files属性
3,元素拖拽 =》即从浏览器内拖动
3.1，将目标元素拖放至指定区域
3.2,设置拖动时的图标
3.3，鼠标拖拽实现移动效果
1，拖放事件
如果不使用drag元素的话;也可以使用onmousedown，onmouseover，onmouseup这三个来实现效果；想要拖动的话，必须在其设置draggable属性为true；需要注意的是，img和a默认为true
拖放过程中，被拖动的元素被称为目标对象，在这过程中经历的其他对象称为过程对象，最终到达的对象接叫目标对象；而每个都有其属性
源对象
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
过程对象
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
**ondragover** - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
**ondragleave** - 当被鼠标拖动的对象离开其容器范围内时触发此事件
目标对象
**ondrop** - 在一个拖动过程中，释放鼠标键时触发此事件
注意： 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。
2，dataTransfer对象
setData（name，data） 存储数据
第一个参数，要存储数据的名字（可以自己命名）
第二个参数，要存储的数据
getData（name） 获取存储名字为“name”的数据
clearData（name） 清除dataTransfer存储的数据
参数可选，为空则清空所有数据
setDragImage（element，x，y） 通过img元素设置拖放图标
element是拖拽时鼠标下面的图片（img或canvas元素）
x、y分别相对于图片的横向和纵向偏移量，对应鼠标指针
files属性
返回被拖拽的文件列表，是一个FileList对象，有length属性，可通过下标访问
3,元素拖拽 =》即从浏览器内拖动
3.1，最简单的元素拖拽小案例；将目标元素拖放至指定区域
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>拖拽图片至指定区域</title>
8 <style>
9 div {
10 width: 400px;
11 height: 500px;
12 border: 1px solid red;
13 }
14 </style>
15
16 <script>
17 window.onload = function() {
18 var img = document.getElementsByTagName("img")[0];
19 var div = document.getElementsByTagName("div")[0];
20
21 img.ondragstart = function(e) {
22
23 e.dataTransfer.setData("text", e.target.id);
24 console.log(e.target);
25 console.log(this);
26
27 }
28 div.ondragover = function(e) {
29 e.preventDefault();
30 }
31 div.ondrop = function(e) {
32 e.preventDefault();
33 var id = e.dataTransfer.getData("text");
34 var data = document.getElementById(id);
35
36 this.appendChild(data);
37 }
38 }
39 </script>
40 </head>
41 <body>
42 <img src="img/demo (4).png" draggable="true" alt="" id="demo">
43 <div>
44 <p>拖动图片至此</p>
45 </div>
46 </body>
47</html>
48
49<!--
50 拖拽的前提，在源目标上设置可拖拽，draggable=“true”
51 注意：img和a默认为true
52 一个拖拽大概只需要三个事件就可以完成，分别是ondrogstart，ondrogover，ondrop
53
54 1，源对象 拖拽开始ondragstart
55 设置数据 e.dataTransfer.setData("text", e.target.id);
56
57 2.目标对象 去除ondrogover默认行为
58 e.preventDafault();
59
60 3,目标对象 拖拽完成drop
61 3.1，提取数据 var id = e.dataTransfer.getData("text");
62 3.2，根据id值得到节点 var data = document.getElementById(id);
63 3.3，开始操作
64
65 --> 基本上所有的元素拖拽都是这样，效果不同是因为在3.3中的操作不同，这里是将一个图片（元素）移动到一个盒子中（目标对象）
自然还有其他效果，例如：
1，垃圾箱回收效果，即拖拽到一定目标元素消失；
data.parentNode.removeChild(data); //删除当前节点的办法,找到父节点,然后删除指定子节点
3.2,设置拖动时的图标
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>HTML5拖放API之设置可拖放元素</title>
6 <style>
7 p {
8 width: 100px;
9 height: 100px;
10 background-color: yellow;
11 }
12 </style>
13 </head>
14 <body>
15 <h3>HTML5拖放API之设置可拖放元素</h3>
16 <hr />
17 <p draggable="true" id="p" ondragstart="drag(event)">这是一个可拖放的段落元素。</p>
18 <script>
19 p.ondragstart = function(ev) {
20
21
22 var img = new Image();
23 img.src = "img/star.jpg";
24 ev.dataTransfer.setDragImage(img, 5, 5);
25 }
26 </script>
27
28 </body>
29</html> 3.3，鼠标拖拽实现移动效果
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>鼠标实现拖拽效果</title>
7 <style type="text/css">
8 body {
9 position: relative;
10 padding: 0;
11 margin: 0;
12 }
13
14 img {
15 position: absolute;
16 }
17 </style>
18 </head>
19 <body>
20 <img src="img/p3.png" id="target">
21 <script type="text/javascript">
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 target.ondragstart = function(e) {
59 var disX = e.clientX - this.offsetLeft;
60 var disY = e.clientY - this.offsetTop;
61 target.ondrag = function(e) {
62 var x = e.clientX;
63 var y = e.clientY;
64
65 if (x == 0 && y == 0) {
66 return;
67 }
68
69 x -= disX;
70 y -= disY;
71
72 if (x < 0) {
73 x = 0;
74 } else if (x > window.innerWidth - this.offsetWidth) {
75 x = window.innerWidth - this.offsetWidth
76 }
77 if (y < 0) {
78 y = 0;
79 } else if (y > window.innerWidth - this.offsetWidth) {
80 y = window.innerWidth - this.offsetWidth
81 }
82 this.style.left = x + "px";
83 this.style.top = y + "px";
84 console.log(x, y)
85 }
86 }
87 </script>
88 </body>
89</html>
90<!--
91 鼠标拖拽改变位置只需要改变源对象
92
93 1，开始拖拽 ondragstart
94 获得偏移量
95
962.ontrag
97 获得鼠标x，y，
98 当鼠标最后一刻时；不用此数据
99
100
101 获得飞机的x，y
102 --> [垃圾桶回收效果 ](https://blog.csdn.net/weixin_44797182/article/details/99128148)
接下一篇文章：https://blog.csdn.net/weixin_44797182/article/details/100588078
待续，，，