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">；相当与thisconsole.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值 即demovar 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，ondrop1，源对象 拖拽开始ondragstart设置数据  e.dataTransfer.setData("text", e.target.id);2.目标对象 去除ondrogover默认行为e.preventDafault();3,目标对象 拖拽完成drop3.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
待续，，，