js实现鼠标拖拽效果

js实现鼠标拖拽效果

1、获取鼠标位置

获取鼠标位置的方法：
鼠标相对于元素的坐标点(不计算边框 ) 事件对象.offsetX（水平方向） 事件对象.offsetY（垂直方向）
鼠标相对于元素的坐标点(计算边框 ) 事件对象.clientX; 事件对象.clientY;
元素可用区域的边缘到光标的位置 不计算边框

 window.onmousemove=function(e){
        var e=window.event || e;
        var x = e.offsetX;
        var y = e.offsetY;
        console.log(x,y);
    }

2、计算盒子能移动的最大范围

给盒子设置的left为鼠标的位置减去盒子宽度的一半
给盒子设置的top为鼠标的位置减去盒子高度的一半
left 最大值为大盒子的宽减去要移动盒子宽的半
top 最大值为大盒子的高减去要移动盒子高的半
left和top 的最小值为0；这样盒子就不会超出区域
获取窗口可视区域的宽高
window.innerWidth window.innerHeight（包含滚动条的）
document.documentElement.clientWidth document.documentElement.clientHeight（不包含滚动条）

3、给要拖拽的盒子添加鼠标按下以及鼠标移动事件

给div绑定鼠标按下的事件
在按下的事件中，再给div绑定一个鼠标移动的事件
移动过程中，获取光标位置，计算出div需要设置的上面的距离和左边的距离
将上面的距离和左边的距离 给到 div 设置绝对定位的top和left
在鼠标弹起时鼠标移动效果消失

 var box = document.querySelector(".box");
    box.onmousedown=function(e){
        var e = window.event || e;
        var x = box.clientWidth;
        var y = box.clientHeight;
        // console.log(x,y);
        document.onmousemove=function(e){
            var e = window.event || e;
            var x1 = e.clientX - x/2;
            var y1 = e.clientY - y/2;
            // console.log(x1,y1)
            
            var maxl = document.documentElement.clientWidth-box.clientWidth;
            var maxt = document.documentElement.clientHeight-box.clientHeight;
            //console.log(maxl,maxt);
            if(x1>=maxl){
                x1=maxl
            }else if(x1<=0){
                x1=0;
            }

            if(y1>=maxt){
                y1=maxt;
            }else if(y1<=0){
                y1=0;
            }
             
            box.style.left=x1+"px";
            box.style.top=y1+"px";
        }
    }
    box.onmouseup=function(){
        document.onmousemove=null;
    }