DOM-11 【兼容】鼠标行为坐标系、pageXY封装、拖拽函数封装

本文链接：https://blog.youkuaiyun.com/weixin_43503511/article/details/118045603

这篇博客详细介绍了JavaScript中实现元素拖拽的原理，通过解析鼠标事件如clientX/Y、pageX/Y等属性来跟踪鼠标位置。文章提供了一种兼容性良好的拖拽功能封装，包括在鼠标按下、移动和释放时如何更新元素位置，确保元素拖拽过程的平滑进行。

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

鼠标行为

e.属性	含义	相关属性
clientX/Y	鼠标位置相对于当前可视区域的坐标	x/y（FF火狐部分版本不支持）
pageX/Y(IE9以下不支持)	鼠标位置相对于当前文档的坐标	layerX/Y (IE11以下同clientX/Y)
screenX/Y	鼠标位置相对于显示器屏幕的坐标
offsetX/Y	鼠标位置相对于块元素的坐标（以左上角为顶点，包括边框，Safari不包括边框）

pageXY封装

// 兼容性写法：获取相对文档的位置
function pagePos(e) {
    var sLeft = getScrollOffset().left,
        sTop = getScrollOffset().top,
        cLeft = document.documentElement.clientLeft || 0,
        // 获取文档偏移，若值为undefined，取偏移为0
        cTop = document.documentElement.clientTop || 0;
    return {
        X: e.clientX + sLeft - cLeft,
        Y: e.clientY + sTop - cTop,
    }
}

拖拽

mousemove是基于mousedown事件的

oBox.onmousedown = function (e) {
    document.onmousemove = function (e) {
        var e = e || window.event,
            page = pagePos(e);
        oBox.style.left = page.X + 'px'
        oBox.style.top = page.Y + 'px'
    }
}
oBox.onmouseup = function (e) {
    document.onmousemove = null
}

// 拖拽的时候，box的左上角顶点不要突变到鼠标的位置
oBox.onmousedown = function (e) {
    var e = e || window.event,
        x = pagePos(e).X - parseInt(getStyles(this, 'left')),
        y = pagePos(e).Y - parseInt(getStyles(this, 'top'));
    document.onmousemove = function (e) {
        var e = e || window.event,
            page = pagePos(e);
        oBox.style.left = page.X - x + 'px'
        oBox.style.top = page.Y - y + 'px'
    }
    document.onmouseup = function (e) {
        this.onmousemove = null
        this.onmouseup = null
    }
}

// 封装拖拽函数
function elemDrag(elem) {
    var x,
        y;
    addEvent(elem, 'mousedown', function (e) {
        var e = e || window.event;
        x = pagePos(e).X - parseInt(getStyles(elem, 'left'))
        y = pagePos(e).Y - parseInt(getStyles(elem, 'top'))
        console.log(x, y)
        addEvent(document, 'mousemove', mouseMove)
        addEvent(document, 'mouseup', mouseUp)
        cancelBubble(e)
        preventDefaultEvent();
        function mouseMove(e) {
            var e = e || window.event,
                page = pagePos(e)
            elem.style.top = page.Y - y + 'px'
            elem.style.left = page.X - x + 'px'
        }
        function mouseUp(e) {
            var e = e || window.event
            removeEvent(document, 'mousemove', mouseMove)
            removeEvent(document, 'mouseup', mouseUp)
        }
    })
}