拖拽，碰撞检测

1. 拖拽

1.1 拖拽原理

鼠标拖拽效果的实现，就是在鼠标摁下和移动的时候，修改元素的定位值的效果。

1.1.1 鼠标按下（mousedown）

获取到鼠标的坐标距离元素左边和上边的距离

鼠标坐标距离元素左边的距离：

disX = ev.clientX - 元素.offsetLeft;

鼠标坐标距离元素左边的距离:

disY = ev.clientY - 元素.offsetTop;

1.1.2 鼠标移动（mousemove）

如果想要多次移动，那么这里的mousemove事件需要添加给document
需要获取到元素在移动的时候的正确位置
首先拿到鼠标的坐标：ev.clientX/ev.clientY
然后计算元素的正确位置：
元素的Left值：

left = ev.clientX - disX;

元素的Top值:

top = ev.clientY - disY;

1.1.3 鼠标松开（mouseup）

清除掉鼠标移动的事件

元素.onmouseup =  function(){
    document.onmousemove = null;
}

一个完整的鼠标拖拽一个元素

//HTML
<div id="box"></div>
//JS
window.onload=function(){
    var box=document.getElementById("box");
    var disX;
    var disY;
    //鼠标按下
    box.onmousedown=function(ev){
        disX=ev.clientX-this.offsetLeft;
        disY=ev.clientY-this.offsetTop;
                
        //鼠标移动
        document.onmousemove=function(ev){
            var l=ev.clientX-disX;
            var t=ev.clientY-disY;
                    
            box.style.left=l+'px';
            box.style.top=t+'px';
        };
                
        //鼠标抬起
        document.onmouseup=function(){
            document.onmousemove=null;
        };
                
        return false;
    }
};

1.4 限制边缘

当拖拽的时候，不可能会让它去无限制的拖拽，需要限制一个拖拽边缘。
我们浏览器的边缘为：

left:       0px
top:        0px
right:      document.documentElement.clientX px
bottom :    document.documentElement.clientY px

元素的可以动区域为：

left:       0px
top:        0px
right:      浏览器边缘的值 - 元素的自身的宽度
bottom：    浏览器的边缘值 - 元素自身的高度

那么判断元素的 top 和 left 值，就可以判断它是否移动到了边缘，就可以进行处理了。

边缘吸附也是相同的道理

2.碰撞检测

碰撞检测示意图：

碰撞检测

如图所示，如果我们拖拽的元素不碰到这个蓝色方块的时候，也就意味着碰撞没有发生，换句话说，当我们拖拽的元素碰撞到了这个蓝色的方块儿的时候，证明发生了碰撞。

我们使用getBoundingClientRect()来获取鼠标拖拽的元素和蓝色元素的属性

var boxMes = box.getBoundingClientRect();
var blueMes = box.getBoundingClientRect();

判断碰撞

//如果
boxMes.bottom < blueMes.top
boxMes.left > blueMes.right
boxMes.top > blueMes.bottom
boxMes.right < blueMes.left 
//满足这4个条件的任意一个时候，说明没有发生碰撞，那么相反就是发生了碰撞。