javascript 中的鼠标拖拽 -逆战班

关于js中广泛应用的托拽效果。和电商放大效果，其核心应用在于拖拽和tab切换；放大图片的基础应用我想大家应该都很清楚。
拖拽事件也无非是加不加位置限定，和处法条件的不同。
1聊天窗口的拖拽。点击触发`

 <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            position:absolute;
        }
 </style>
        <div class="box"></div>
        js属性
var box = document.querySelector(".box");
box.onmousedown = function(e){
    var e = e || window.event ;
    var ox = e.offsetX;
    var oy = e.offsetY;
    这里获取的x，y只是div本身的左上角点位的坐标。实际就是我们所说的左边距与上边距
    如果我们有限定条件这里获取x，y坐标是就要根据我们的实际需要进行获取。之后还会有限定移动范围的案例给大家参考
    document.onmousemove = function(ev){
        ev = ev || window.event;
        var x = ev.clientX - ox;
        var y = ev.clientY - oy;
  这里clentX/Y获取的是 **左上角点位的** 实时位置。此时用实时位置减去出事位置。就必然是我们鼠标移动的距离
        box.style.left = x + 'px';
        box.style.top = y + 'px';
    }
}
box.onmouseup = function(){
    document.onmousemove = null;
}

如果我们要对应当范围进行限制。必然是对只好的结果进行限制。我们可以通过简单的逻辑语句和赋值操作来实现这个目的。 （限制我们得到的值 取值范围 0-100px）这样。盒子本身的移动范围就会被限定

var box = document.querySelector(".box");
box.onmousedown = function(e){
    var e = e || window.event ;
    var ox = e.offsetX;
    var oy = e.offsetY;
    document.onmousemove = function(ev){
        ev = ev || window.event;
        var x = ev.clientX - ox;
        var y = ev.clientY - oy;
        var l = x ;
        var t = y ;
        if(l<min){
        l = min;
        }else if(l>max){
    l = max}
 通过if逻辑的判断。和赋值。我们可以很轻松的对齐移动范围进行限定。在（min（0）~max）之间的范围内进行移动。**注意这里是 可平移的距离。   如果要确定范围  加上你div本身的 width**
 **max一般为套盒中大的width-小的width来限定距离，本身范围应该是大的width**
    }
}

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