JavaScript基础(32)_拖拽、鼠标移动事件

风之舞_yjf

于 2024-08-11 09:55:43 发布

阅读量211

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/no15870678621/article/details/141101619

版权

JavaScript 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

复习：鼠标移动事件

关于“传递事件对象”浏览器兼容性解决办法：
方法1、if(!event){
event = window.event;
}
方法2、event = event || window.event;

关于“获取滚动条距离”浏览器兼容性解决办法：
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
var st = document.body.scrollTop || document.documentElement.scrollTop;

获取鼠标在可见窗口坐标的计算方式：
方式1：
var x = event.pageX;
var y = event.pageY;
方式2：
var x = event.clientX + sl;
var y = event.clientY + st;

拖拽的流程：

1、当鼠标按下点击被拖拽元素时，开始拖拽，事件：onmousedown。
2、当鼠标开始移动拖拽元素时，事件：onmousemove。
3、当鼠标松开时，事件：onmouseup。

鼠标按下时，鼠标在div元素内的偏移量：
方式1：
ol = event.pageX - div元素.offsetLeft
ot = event.pageY - div元素.offsetTop

方式2：
ol = event.clientX + sl - div元素.offsetLeft
ot = event.clientY + st - div元素.offsetTop

注意：该event为onmousedown事件对象参数

鼠标拖动后松开时，该div元素左上角实时坐标：
（div元素的左上角位置 = 鼠标在当前页面的坐标位置 - 鼠标在div元素元素内的偏移量。）

方式1：
x = event.pageX - ol;
y = event.pageY - ot;

方式2：
x = event.clientX + sl - ol;
y = event.clientY + st - ot;

注意：该event为onmouseup事件对象参数。

案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
</head>
<style>
    body {
        width: 2000px;
        height: 2000px;
    }

    #box1 {
        width: 80px;
        height: 60px;
        background-color: aquamarine;
        /* 开启绝对定位才能获取偏移量 */
        position: absolute;
    }

    #box2 {
        width: 80px;
        height: 60px;
        background-color: yellowgreen;
        position: absolute;
        top: 100px;
        left: 100px;
    }
</style>
<script>
    window.onload = function () {
        var box1 = document.getElementById("box1");

        box1.onmousedown = function (event) {
            // box1元素的偏移量默认值为8，获取鼠标指针在鼠标按下时，鼠标在box1元素内的偏移量。
            ol = event.pageX - box1.offsetLeft;
            ot = event.pageY - box1.offsetTop;
  
            document.onmousemove = function (event) {
                // 获取事件对象，同时解决各浏览器兼容性问题
                event = event || window.event;

                // 获取鼠标在窗口的坐标
                var x = event.pageX ;
                var y = event.pageY;

                // box1的左上角位置 = 鼠标在当前页面的坐标位置 - 鼠标在box1元素内的偏移量。
                box1.style.left = x - ol + "px";
                box1.style.top = y - ot + "px";
            }
            // 关闭鼠标再次按下时，引起的拖拽。
            box1.onmousedown = null;
        }

        document.onmouseup = function () {
            // 鼠标松开时，拖拽元素停止移动。
            document.onmousemove = null;
            // 关闭此次鼠标松开促发的事件。
            document.onmouseup = null;
        }
    }
</script>

<body>
    <div id="box1"></div>
    <!-- 设置box2目的是，当移动到兄弟元素box2内，box1是否会触发事件，这是为什么设置document.onmousemove的原因 -->
    <div id="box2"></div>
</body>

</html>