拖拽案例

思路

我是这样理解的,鼠标移动后让盒子绝对定位,然后给top值和left值。
top值:鼠标距离窗口顶部的距离 减去 鼠标距离盒子上边的距离
left值:鼠标距离窗口左边的距离 减去 鼠标距离盒子左边的距离
然后是限制盒子的活动范围,不让其超出可视区域也就是窗口,原理是用窗口的可视宽度和高度减去盒子的宽高可得出盒子的最大移动范围,之后就是top值与left值不能小于0和超出这个移动范围。
最后,当鼠标松开后清除移动的函数。

代码如下

HTML与CSS

<body>
    <div class="box"></div>
</body>
<style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        .box{
            width:150px;
            height:150px;
            background-color:red;
            position:fixed;
            cursor:move;
        }
    </style>

效果图
效果图
JS部分
event对象:获取鼠标的位置,clientX和clientY

<script type="text/javascript">
    box.function(e){
        var  e = e || event; //获取event对象
        var  X= e.clientX-box.offsetLeft;  // 计算鼠标按下的时候到盒子的边界左边界距离;
        var  Y =e.clientY-box.offsetTop;// 计算鼠标按下的时候到盒子的边界上边界距离;
        document.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.function(){
        document.onmousemove = null;    //清空被移动的函数
    }
</script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值