拖拽事件思路及所学知识点

最新推荐文章于 2020-11-18 00:22:16 发布

wuli萍

最新推荐文章于 2020-11-18 00:22:16 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/wuli_ping/article/details/89336738

版权

拖拽时间思路：

1、鼠标按下时的事件对象操作

（找到鼠标距离盒子的边距）

2、鼠标移动时对事件对象的操作

（计算出鼠标移动时盒子移动的距离

写出浏览器的可见高度和可见宽度

计算出盒子可以移动的最大距离）

3、当鼠标松开时，将鼠标移动事件清空

HTML部分

<body>
    <div id="box"></div>
</body>

JS部分

<script type="text/javascript">
    box.onmousedown=function(e){
        var  e = e || event; //获取event对象
        var  X= e.clientX-box.offsetLeft;  // 计算鼠标按下的时候到盒子的边界左边界距离；
        var  Y =e.clientY-box.offsetTop;// 计算鼠标按下的时候到盒子的边界上边界距离；
        document.onmousemove=function(e){
            var e = e || event;
            var moveX= e.clientX-X;    // 计算盒子被移动后到浏览器左边界的距离
            var moveY = e.clientY-Y;   // 计算盒子被移动后到浏览器上边界的距离
            var winX = document.documentElement.clientWidth;  //窗口可见的宽
            var winY = document.documentElement.clientHeight; // 窗口可见的高；
            var maxW = winX-box.offsetWidth;  //计算出盒子可移动的最大宽度
            var maxH = winY-box.offsetHeight;   //计算出盒子可移动的最大高度
                if(moveX<0){
                    moveX=0;
                }
                if(moveY<0){
                    moveY=0;
                }
                if(moveX>maxW){
                    moveX= maxW
                }
                if(moveY>maxH){
                    moveY=maxH
                }
                box.style.left = moveX+"px";  //盒子被移动后左边界的距离
                box.style.top = moveY+"px";   //盒子被移动后上边界的距离
        }
    }
    document.onmouseup=function(){
        document.onmousemove = null;    //清空被移动的函数
    }
</script>