一、什么是拖放
拖放就是通过鼠标放在一个物体上，按住鼠标不放就可以把一个物体拖动到另一个位置。其实我们平时一直都有接触，如图
那么在网页上其实也可以实现同样效果的拖放功能，如图
那么，就让我们来看看如何实现的吧
二、拖放事件
在IE4的时候，Js就可以实现拖放功能了，当时只支持拖放图像和一些文本。后来随着IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了该规范，Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。
默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将 draggable 属性设置为 true，这是HTML5规定的新属性，用于设置元素是否能被拖动。因此，图像、链接、文本的 draggable 属性默认为 true，其余元素的 draggable 属性默认为 false
在实现拖放功能时有这样两个概念，分别是被拖动元素和目标元素，它们都有各自支持的事件，那么我们来了解一下
（1）被拖动元素的事件
被拖动元素所支持的事件如下表所示
| 事件 | 含义 |
| dragstart | 准备拖动被拖动元素时触发 |
| drag | 拖动的过程中触发（频繁触发） |
| dragend | 拖动结束时触发 |
我们来用一个例子测试一下这三个事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: lightgreen; } </style> </head> <body> <div class="box" draggable='true'></div> <script> let box = document.querySelector('.box') // 绑定dragstart事件 box.addEventListener('dragstart', function() { console.log('拖拽开始了'); }) // 绑定drag事件 box.addEventListener('drag', function() { console.log('元素被拖动'); }) // 绑定dragend事件 box.addEventListener('dragend', function() { console.log('拖拽结束'); }) </script> </body> </html>
我们来看看测试效果
（2）目标元素的事件
在实现拖放功能的过程中，目标元素上的事件有如下三个
| 事件 | 含义 |
| dragenter | 被拖放元素进入目标元素时触发 |
| dragover | 被拖放元素在目标元素内时触发（频繁触发） |
| dragleave | 被拖动元素离开目标元素时触发 |
| drop | 当被拖动元素被放到了目标元素中时触发 |
这里我要详细讲解一下这三个事件的触发规则：
- dragenter事件与
mouseover事件类似，那怎样才算被拖放元素进入目标元素呢？经过测试发现，当被拖放元素的一半以上面积在目标元素内才算进入了目标元素
- dragover事件比较特殊，当拖放元素进入目标元素以后就会一直触发，就跟你设置了一个无限循环的定时器一样，即使你不移动元素也会触发，除非拖放事件结束或者被拖放元素离开目标元素
- dragleave事件 的其触发条件正好与
dragenter事件相反，它是当被拖放元素离开目标元素时触发，经过测试，离开目标元素的条件是：被拖放元素一半以上的面积离开目标元素
- drop事件 可以叫做放置目标事件，它是当被拖放元素放置到了目标元素中时触发。虽然任何元素都支持该事件，但是所有元素默认都是不允许被放置的，所以在不做任何处理的情况下，该事件是不会触发的
同样的，我们来用具体的例子，先来体会一下前三个事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: lightgreen; } .location{ width: 100px; height: 100px; background-color: lightpink; } </style> </head> <body> <div class="box" draggable='true'></div> <div class="location"></div> <script> let located = document.querySelector('.location') // 绑定dragenter事件 located.addEventListener('dragenter', function() { console.log('元素进入了目标元素'); }) // 绑定dragover事件 located.addEventListener('dragover', function() { console.log('元素在目标元素内'); }) // 绑定dragleave事件 located.addEventListener('dragleave', function() { console.log('元素离开了目标元素'); }) </script> </body> </html>
我们来看看测试效果，这里你们要仔细看被拖放元素多少面积进入或离开目标元素时才触发的对应事件
那么最后我们再来讲一下如何才能触发 drop事件，只需要阻止 dragenter事件 和 dragover事件 的默认行为即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: lightgreen; } .location{ width: 100px; height: 100px; background-color: lightpink; } </style> </head> <body> <div class="box" draggable='true'></div> <div class="location"></div> <script> let located = document.querySelector('.location') located.addEventListener('dragenter', function(e) { e.preventDefault() }) located.addEventListener('dragover', function(e) { e.preventDefault() }) located.addEventListener('drop', function() { console.log('元素被放置'); }) </script> </body> </html>
来看下测试效果图
值得注意的是，在我们没有对 drop事件 做处理之前，将被拖放元素拖动到目标元素中时，鼠标样式会变成禁止的样式，如图
而当我们设置元素为可放置了以后，鼠标样式是这样的。如图
