jsdiv的拖拽优化，和边界限定

最新推荐文章于 2023-05-11 22:04:17 发布

海龟先生plus

最新推荐文章于 2023-05-11 22:04:17 发布

阅读量2.2k

点赞数 2

分类专栏： js 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_45219069/article/details/94588699

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

 <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            margin: 80px auto;
            position: relative;
        }
        .box .boxer{
            width: 80px;
            height: 80px;
            background-color: greenyellow;
            position: absolute;
            cursor: move;

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="boxer"></div>
    </div>
    <script>
        //需要鼠标在移动的div任意位置都可以移动，不是之前的单纯鼠标的坐标
        //相当于的到移动div的偏移量，鼠标的坐标值，减去它offsetLeft的值---参照定位
        //获取
        var boxer=document.querySelector(".boxer")
        var box=document.querySelector(".box")
        //绑定按下事件
        boxer.onmousedown=function(event){
            var event=event||window.event//event的兼容,同时得到clientX,的值
            var x=event.clientX-boxer.offsetLeft
            var y=event.clientY-boxer.offsetTop//得到小段的偏移
            // 将移动事件绑定到 document 上，防止拖动过快脱离开
            document.onmousemove=function(event){
                var xx=event.clientX-x//当移动的时候，用它的鼠标值减去偏移量
                var yy=event.clientY-y
                if(xx<=0){              //判定边界值，=0，就在最边上了，
                    xx=0
                }
                if(xx>=box.offsetWidth-boxer.offsetWidth){//大于整个盒子的宽度-小盒子的宽度
                    xx=box.offsetWidth-boxer.offsetWidth 
                }
                if(yy<=0){
                    yy=0
                }
                if(yy>=box.offsetHeight-boxer.offsetHeight){
                    yy=box.offsetHeight-boxer.offsetHeight 
                }
                
                
             
                boxer.style.left=xx+"px"
                boxer.style.top=yy+"px"
            }
            boxer.onmouseup=function(){
                document.onmousemove=null//鼠标抬起时，清空
                boxer.onmouseup=null 
            }
        }
        
    </script>

在这里插入图片描述

海龟先生plus

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jsdiv的拖拽优化，和边界限定

<style> *{ margin: 0px; padding: 0px; } .box{ width: 300px; height: 300px; background-color: gold; ...
复制链接

扫一扫

专栏目录