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

最新推荐文章于 2021-04-11 19:56:47 发布

原创最新推荐文章于 2021-04-11 19:56:47 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了一个简单的拖拽功能实现过程，包括鼠标按下、移动及松开的事件处理，计算元素移动距离并限制其在浏览器可视区域内的移动范围。涉及HTML、CSS及JavaScript的基本交互原理。

拖拽时间思路：

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>