js简单实现鼠标拖拽功能:盒子可以跟着鼠标移动位置

实现的原理:
在这里插入图片描述
根据上面的图可以算出移动后的盒子的left和top:

鼠标距离边界的值:
ev.pageY - box.top
ev.pageX - box.left

box2.top = ev2.pageY - (ev1.pageY - box1.top)
= ev2.pageY - ev1.pageY + box1.top
box2.left = ev2.pageX - (ev1.pageX - box1.left)
= ev2.pageX - ev1.pageX + box1.left

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRAG-拖拽</title>
</head>
<style>
    html, body {
        height: 100%;
        overflow: hidden;
    }
    .box {
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: lightblue;
        position: absolute;
        top: 0px;
        left: 0px;
        cursor: move;
    }
</style>

<body>
    <div class="box"></div>
    
    <script>
        let box = document.querySelector(".box");
        box.onmousedown = down;
        
        function down(ev) {
            // 把鼠标的起始位置和盒子的起始位置存为盒子的自定义属性
            this.pageX = ev.pageX;
            this.pageY = ev.pageY;
            this.left = this.offsetLeft;
            this.top = this.offsetTop;
            // 接下来再给盒子绑定MOVE和UP方法:只有鼠标按下的时候才去绑定移动和抬起
            // 把鼠标和当前盒子拿绳子绑在一起
            this.onmousemove = move;
            this.onmouseup = up;
            this.setCapture(); //只支持IE和火狐
        }
        function move(ev) {
            let curT = ev.pageY - this.pageY + this.top,
                curL = ev.pageX - this.pageX + this.left;
            // 边界处理
            let minL = 0,
                maxL = document.documentElement.clientWidth - this.offsetWidth,
                minT = 0,
                maxT = document.documentElement.clientHeight - this.offsetHeight;
            curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
            curT = curT < minT ? minT : (curT > maxT ? maxT : curT);

            this.style.left = curL + 'px';
            this.style.top = curT + 'px';
        }
        function up(ev) {
            // 鼠标抬起,把MOVE和UP都移除掉
            // 解绑
            this.onmousemove = null;
            this.onmouseup = null;
            this.releaseCapture(); //只支持IE和火狐
        }
        
    </script>
</body>

</html>

setCapture和releaseCapture方法:为了防止鼠标滑的过快,导致鼠标焦点丢失,盒子没办法继续跟着移动,所以将鼠标和盒子绑在一起。
由于谷歌不支持setCapture和releaseCapture方法,所以,换个思路:
由于鼠标的滑动不会离开整个document,所以将鼠标的移动和抬起放在document下。

    <script>
        let box = document.querySelector(".box");
        box.onmousedown = down;
        
        function down(ev) {
            // 把鼠标的起始位置和盒子的起始位置存为自定义属性
            this.pageX = ev.pageX;
            this.pageY = ev.pageY;
            this.left = this.offsetLeft;
            this.top = this.offsetTop;
            // 接下来再给盒子绑定MOVE和UP方法:只有鼠标按下的时候才去绑定移动和抬起
            // 谷歌的绑定方法:鼠标在document中操作,注意this的处理
            document.onmousemove = move.bind(this);
            document.onmouseup = up.bind(this);
        }
        function move(ev) {
            let curT = ev.pageY - this.pageY + this.top,
                curL = ev.pageX - this.pageX + this.left;
            // 边界处理
            let minL = 0,
                maxL = document.documentElement.clientWidth - this.offsetWidth,
                minT = 0,
                maxT = document.documentElement.clientHeight - this.offsetHeight;
            curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
            curT = curT < minT ? minT : (curT > maxT ? maxT : curT);

            this.style.left = curL + 'px';
            this.style.top = curT + 'px';
        }
        function up(ev) {
            // 鼠标抬起,把MOVE和UP都移除掉
            // 谷歌的解绑方法:
            document.onmousemove = null;
            document.onmouseup = null;
        }
        
    </script>
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值