js实现拖拽盒子

用一个变量来表示鼠标按下不松开，并且没有离开element元素

计算鼠标移动的距离加上元素原来的left,top的值，就是元素的位置

offsetLeft ：box1元素原来的left距离

offsetTop ：box1元素原来top的距离

startX： 鼠标第一次点击的x坐标

startY： 鼠标第一次点击的y坐标

        var canDrag = false;
        var box1 = document.querySelector(".box1");
        var offsetLeft = "";
        var offsetTop = "";
        var startX = 0;
        var startY = 0;
        box1.onmousedown = function(e){
            canDrag = true;//鼠标按下
            startX = e.clientX;
            startY = e.clientY;
            offsetLeft = box1.offsetLeft;
            offsetTop = box1.offsetTop;
        }
        box1.onmouseup = function(){
            canDrag = false;//鼠标松开
        }
        box1.onmouseout = function(){
            canDrag = false;//鼠标离开
        }
        box1.onmousemove = function(e){
            if(canDrag){
                var stepX = e.clientX - startX;
                var stepY = e.clientY - startY;
                box1.style.left = offsetLeft + stepX + "px";
                box1.style.top = offsetTop + stepY +"px";
            }
        }