拖拽效果

如何才能实现一个拖拽效果呢？

1.给div绑定鼠标按下的事件

2.在按下的事件中，再给div绑定一个鼠标移动的事件

3.移动过程中，获取光标位置，计算出div需要设置的上面的距离和左边的距离

4将上面的距离和左边的距离 给到 div 的top和left

css代码如下：

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position:absolute;
    left:100px;
    top:0;
}

js代码如下：

var box = document.querySelector(".box");
box.onmousedown=function(ev){
    // 鼠标按下的时候就应该获取到光标的位置，相对元素的
    var ev = ev || window.event;
    var x1 = ev.offsetX;
    var y1 = ev.offsetY;
    // console.log(123);
    document.onmousemove=function(e){
        // console.log(123);
        // 获取光标位置
        var e = e || window.event;
        // 光标在div上的位置是永远不变的
        // var x = e.offsetX;
        // var y = e.offsetY;
        // console.log(x,y);
        // 所以使用offset不行，需要使用client
        var x = e.clientX;
        var y = e.clientY;
        var l = x - x1;
        if(l<=0){
            l=0;
        }
        // 获取窗口可视区域的宽高  window.innerWidth  window.innerHeight - 包含滚动条的
        // 不包含滚动条 document.documentElement.clientWidth  document.documentElement.clientHeight
        // console.log(document.documentElement.clientWidth);
        var maxL = document.documentElement.clientWidth - box.clientWidth;
        if(l>=maxL){
            l = maxL;
        }
        // var b = parseInt(window.getComputedStyle(box)["bottom"]);
        // // console.log(b);
        // if(b<=0){
        //     b=0
        // }
        // console.log(x,x1);
        box.style.left = l + "px"
        var t = y - y1;

        if(t<=0){
            t=0
        }
        var maxT = document.documentElement.clientHeight - box.clientHeight;
        if(t>=maxT){
            t = maxT;
        }
        box.style.top = t + "px"
    }
}

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