拖拽

最新推荐文章于 2024-09-30 15:42:36 发布

_Akui

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量121

点赞数

分类专栏： js 文章标签：前端 js

本文链接：https://blog.csdn.net/Akui1997/article/details/89319936

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

拖拽

上一次我记录的是一个鼠标右击样式，这次就在上次的基础上练习了一下拖拽，下面是代码和注释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>拖拽</title>
<style type="text/css">
    *{margin:0;padding:0;}
    #box{width:100px;height:100px;background:red;position:absolute;cursor:move;}
</style>
</head>
<body>
    <div id="box"></div>
</body>
<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>
</html>

相比上次来说，这次用到了更多的关于鼠标水平位置和垂直位置的相关知识，需要计算的位置也比上次多了许多，这部分就需要自己下来多练习和琢磨了，愿明天的自己比今天的自己更加优秀；