javascript基础之拖拽（1）（详细篇）--dataTransfer对象
最近学了的一些关于拖拽的一些案例，原来的认识太过浅薄，所以以多个案例说明一下
目标导航
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，最简单的元素拖拽小案例；将目标元素拖放至指定区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拖拽图片至指定区域</title>
<style>
div {
width: 400px;
height: 500px;
border: 1px solid red;
}
</style>
<script>
window.onload = function() {
var img = document.getElementsByTagName("img")[0];
var div = document.getElementsByTagName("div")[0];
img.ondragstart = function(e) {
//设置一个数据；名字为“text”，值为img的id值
e.dataTransfer.setData("text", e.target.id);
console.log(e.target); //<img src="img/demo (4).png" draggable="true" alt="" id="img">；相当与this
console.log(this); //和上一句一样,个人理解为.e是事件默认属性,e.target就是事件的目标,即img
}
div.ondragover = function(e) {
e.preventDefault();//解禁当前元素为可放置被拖拽元素的区域,即允许在此放置物体
}
div.ondrop = function(e) {
e.preventDefault();
var id = e.dataTransfer.getData("text"); //获取数据，获得的其实是id值 即demo
var data = document.getElementById(id); //根据id选中元素
// e.target.appendChild(data);
this.appendChild(data);//和上一句一样的含义，将id选择中的元素data 转移至div下
}
}
</script>
</head>
<body>
<img src="img/demo (4).png" draggable="true" alt="" id="demo">
<div>
<p>拖动图片至此</p>
</div>
</body>
</html>
<!--
拖拽的前提，在源目标上设置可拖拽，draggable=“true”
注意：img和a默认为true
一个拖拽大概只需要三个事件就可以完成，分别是ondrogstart，ondrogover，ondrop
1，源对象 拖拽开始ondragstart
设置数据 e.dataTransfer.setData("text", e.target.id);
2.目标对象 去除ondrogover默认行为
e.preventDafault();
3,目标对象 拖拽完成drop
3.1，提取数据 var id = e.dataTransfer.getData("text");
3.2，根据id值得到节点 var data = document.getElementById(id);
3.3，开始操作
-->
基本上所有的元素拖拽都是这样，效果不同是因为在3.3中的操作不同，这里是将一个图片（元素）移动到一个盒子中（目标对象）
自然还有其他效果，例如：
1，垃圾箱回收效果，即拖拽到一定目标元素消失；
data.parentNode.removeChild(data); //删除当前节点的办法,找到父节点,然后删除指定子节点
3.2,设置拖动时的图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5拖放API之设置可拖放元素</title>
<style>
p {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<h3>HTML5拖放API之设置可拖放元素</h3>
<hr />
<p draggable="true" id="p" ondragstart="drag(event)">这是一个可拖放的段落元素。</p>
<script>
p.ondragstart = function(ev) {
//这里的图像由于不是页面中的一个元素，因此不可能通过document对象获取到，
//只能通过新建一个对象，设置属性来得到
var img = new Image();
img.src = "img/star.jpg";
ev.dataTransfer.setDragImage(img, 5, 5);
}
</script>
</body>
</html>
3.3，鼠标拖拽实现移动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>鼠标实现拖拽效果</title>
<style type="text/css">
body {
position: relative;
padding: 0;
margin: 0;
}
img {
position: absolute;
}
</style>
</head>
<body>
<img src="img/p3.png" id="target">
<script type="text/javascript">
// console.log(target)//直接可以同过id打印出<img src="img/p3.png" id="target" >
// var target =document.getElementById("target");//和上者一样
//第一种方法
// target.ondragstart = function(e) {
// var disX = e.offsetX;
// var disY = e.offsetY;
// console.log(disX, disY)
// target.ondrag = function(e) {
// var x = e.pageX;
// var y = e.pageY;
// // console.log(x,y) ///最后一刻 0 0
// //徐需要注意的是：drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
// if (x == 0 && y == 0) {
// return;
// }
// if (x < 0) {
// x = 0;
// } else if (x > window.innerWidth - this.offsetWidth) {
// x = window.innerWidth - this.offsetWidth
// }
// if (y < 0) {
// y = 0;
// } else if (y > window.innerWidth - this.offsetWidth) {
// y = window.innerWidth - this.offsetWidth
// }
// // // console.log(x,y); //最后一刻无 0 0
// //得到x y的坐标
// x -= disX;
// y -= disY;
// target.style.left = x + 'px';
// target.style.top = y + 'px';
// }
// }
//第二种方法
target.ondragstart = function(e) {
var disX = e.clientX - this.offsetLeft;
var disY = e.clientY - this.offsetTop;
target.ondrag = function(e) {
var x = e.clientX;
var y = e.clientY;
if (x == 0 && y == 0) {
return;
}
x -= disX;
y -= disY;
//限制,源对象不得超过屏幕
if (x < 0) {
x = 0;
} else if (x > window.innerWidth - this.offsetWidth) {
x = window.innerWidth - this.offsetWidth
}
if (y < 0) {
y = 0;
} else if (y > window.innerWidth - this.offsetWidth) {
y = window.innerWidth - this.offsetWidth
}
this.style.left = x + "px";
this.style.top = y + "px";
console.log(x, y)
}
}
</script>
</body>
</html>
<!--
鼠标拖拽改变位置只需要改变源对象
1，开始拖拽 ondragstart
获得偏移量
2.ontrag
获得鼠标x，y，
当鼠标最后一刻时；不用此数据
//drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
获得飞机的x，y
-->
[垃圾桶回收效果 ](https://blog.csdn.net/weixin_44797182/article/details/99128148)
接下一篇文章：https://blog.csdn.net/weixin_44797182/article/details/100588078
待续，，，
