Drop and Drag API学习与整理

原文链接：Drop and Drag API学习与整理
Drop和Drag是能够DOM元素拖动与释放的API。过去我们也有一个能够实现拖动与释放的流程。今天总结一下，可以看到新的API是给我们提供了很大的便利和简化了许多代码的。

---

拖拽的旧方法

总的是下面下面的三个流程：（js以前是没有直接拖拽的方法的，所谓的拖拽也就是把鼠标拖拽的偏移值赋值给拖动的元素，这样就好像形成一个假象，我是可以拖拽的，实际上该元素就是我们硬性规定他的新新位置的）

通过mousedown事件捕获DOM元素
通过mousemove事件来移动DOM元素
通过mouseup事件来释放DOM元素

我们在拖拽元素时，要计算该元素距离浏览器的top值和left值，当我们获得这个值后，我们再直接给他定位。获得这个top和left需要我们计算，我们很容易算出上图中红色线的距离，利用e.clientX和e.clientY，就可以获得点击该元素时，该点的位置，然后我们再算出该元素距离顶部和底部的距离，相减就可以得到鼠标距离该拖动对象的距离。

具体代码如下：
先定义一个可拖动对象，并给其父框加入对应的样式（做完以后可以试试如果main的absolute去掉会怎么样）：

//CSS
.main{
    position:absolute;
    overflow:hidden;
    width:500px;
    height:500px;
    border:1px solid red;
}
//DOM
<div class="main">
    <img src="./face.png" alt="drag" id="item">
</div>

---

下面是js代码，对应解释以下几点：

1. 两个对象dragObj是拖动对象，mouseOffset是鼠标距离对象的偏移量。
2. 要给document加入onmousemove事件，而不是给对应的obj,否则会页面抖动。
3. mouseup是用来释放对象，用来结束拖动，设置拖动对象为空。
4. 设置mousePoint对象是为了使用的时候更加方便。直接以对象属性的形式访问。
5. getMousePos是用来获得鼠标偏移量的。
6. mousemove用来计算位置并定位。

var dragObj = null;
var mouseOffset = null;
document.onmousemove = mousemove;
document.onmouseup = mouseup;

function mouseup (e){
   
    dragObj = null;
}   

function mousePoint (x,y){
   
    this.x = x;
    this.y = y;
}

function getMousePos (e) {