今天看蛋老师视频中，学习了JavaScript实现拖拽功能常用的两种方式，以及实现了对应的案例。
方法一：draggable
在要拖拽的元素上注册draggable属性<div draggable="true"></div>
拖拽事件
| 拖动时 | |
|---|---|
| 开始 | dragstart |
| 进行中 | drag |
| 结束 | dragend |
| 进入区域 | |
|---|---|
| 进入时 | dragenter |
| 进入后 | dragover |
| 离开 | dragleave |
| 放置 | drop |
dragover事件和drop事件需要阻止默认禁止拖拽行为
案例
方法二：鼠标事件
鼠标事件
| 鼠标事件 | ||
|---|---|---|
| 鼠标按下 | 鼠标移动 | 鼠标松开 |
| mousedown | mousemove | mouseup |
可以看出这三个事件本身和拖拽没什么关联，我们需要配合坐标系来使用，我们需要让元素进行移动，那么可以对元素进行绝对定位。只要left和top的值不断在变化，就会产生移动的效果
原理图如下：
offsetLeft(子盒子到父盒子) = pageX - offsetLeft(父盒子到body) - 鼠标按下时在子盒子中的left offsetTop同理
