2021-05-24 设置元素的拖拽_元素拖动时鼠标样式-优快云博客

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/117047679

本文详细讲解了如何利用JavaScript实现HTML元素的拖拽效果，包括鼠标按下、移动和抬起事件的处理，以及如何通过设置移动范围和坐标计算来确保元素在可视区域内的顺畅拖动。重点讲解了坐标调整、元素限制移动范围以及事件绑定的优化技巧。

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

思路:鼠标按下->鼠标移动->鼠标抬起

<div style="width:100px;height:100px;background:red;
    position:absolute;"></div>

	//实现元素的拖拽效果
    var div = document.querySelector("div");
    div.onmousedown = function(eveDown) {
        document.onmousemove = function(eveMove) {
            //设置div的坐标
            //减去offset的用意是让鼠标指针显示在div正中央,而不是左上角原点
            var l = eveMove.clientX - eveDown.offsetX,
                t = eveMove.clientY - eveDown.offsetY;
            div.style.left = l + 'px';
            div.style.top = t + 'px';
        }
    }
    document.onmouseup = function() {
        document.onmousemove = '';
    }

优化:设置元素移动的范围

//document.documentElement.clientWidth ==> 可见区域宽度
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
var l = eMove.clientX - eDown.offsetX,
    t = eMove.clientY - eDown.offsetY;
if (l < 0) l = 0;
if (t < 0) t = 0;
//页面的宽高-元素的实际宽高=元素的最大活动范围
//offsetWidth属性:获取 div 元素的宽度，包含内边距（padding）和边框（border）==> div元素的宽度
//由此,水平方向最大移动范围=可见区域宽度-div宽度
if (l > (clientW - div.offsetWidth)) l = clientW - div.offsetWidth;
if (t > (clientH - div.offsetHeight)) l = clientH - div.offsetHeight;

完整代码:

        var div = document.querySelector("div");
        div.onmousedown = function(eveDown) {
            document.onmousemove = function(eveMove) {
                //设置div的坐标=鼠标点击位置相对于可视区(就是浏览器)的坐标-鼠标点击位置相对于div的坐标
                var l = eveMove.clientX - eveDown.offsetX,
                    t = eveMove.clientY - eveDown.offsetY;
                //设置l和t的移动范围=可见区域宽度/高度-div宽度/高度
                var maxL = document.documentElement.clientWidth - div.clientWidth;
                var maxT = document.documentElement.clientWidth - div.clientWidth;
                if (l < 0) l = 0;
                if (t < 0) t = 0;
                if (l > maxL) l = maxL;
                if (t > maxT) l = maxT;
                div.style.left = l + 'px';
                div.style.top = t + 'px';
            };
        };
        document.onmouseup = function() {
                document.onmousemove = '';
            };

要点总结:
1.元素要设置绝对定位脱离文档流
2.鼠标移动事件要在鼠标按下事件之中,手册抬起时间与鼠标按下并列,这与实际操作鼠标的顺序保持一致
3.各种坐标的设置需充分掌握
4.给元素绑定鼠标按下事件,给文档绑定鼠标移动事件

*减不减掉offsetX的区别:

            //设置div的坐标
            var l = eveMove.clientX - eveDown.offsetX,
                t = eveMove.clientY - eveDown.offsetY;

在这里插入图片描述
鼠标在div正中间

            //设置div的坐标
            var l = eveMove.clientX ,
                t = eveMove.clientY ;

在这里插入图片描述
鼠标在div原点,即事件源原点(也是clientX的定义坐标)