拖拽的简单实现

最新推荐文章于 2023-03-16 08:40:57 发布

肥头小耳

最新推荐文章于 2023-03-16 08:40:57 发布

阅读量172

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/weixin_39442170/article/details/80859390

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的拖拽功能实现方法。通过计算鼠标点击元素时的相对位置，并利用`onmousedown`、`onmousemove`及`onmouseup`事件，实现了元素在页面上的拖动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近要学习拖拽功能，为了完成一个demo，先从最简单的原理开始学习，记录吧。

window.onload = function() {

    var diffX, diffY;
    var div = document.getElementById('div');

    div.onmousedown = function(event) {
        var event = event || window.event;

        //计算出鼠标点击div时，鼠标相对于div的水平和垂直偏移量
        diffX = event.clientX - this.offsetLeft;
        diffY = event.clientY - this.offsetTop;

        //在鼠标点击div时，给document动态绑定在鼠标点击div时，给document动态绑定onmousemove和onmouseup事件
        document.onmousemove = function(event) {
            var left, top;

            left = event.clientX - diffX;
            top = event.clientY - diffY;

            if(left < 0) {
                left = 0;
            }
            else if(left > (window.innerWidth - div.offsetWidth)) {
                left = window.innerWidth - div.offsetWidth;
            }

            if(top < 0) {
                top = 0;
            }
            else if(top > (window.innerHeight - div.offsetHeight)) {
                top = window.innerHeight - div.offsetHeight;
            }

            div.style.left = left + 'px';
            div.style.top = top + 'px';
        }

        //当鼠标松开时对document的onmousemove和onmouseup事件解绑
        document.onmouseup = function() {
            this.onmousemove = null;
            this.onmouseup = null;
        }
    }

}