H5\CSS\JS 盒子拖动mousedown、mousemove、mouseup、pageX、pageY、offsetLeft、offsetTop

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    <style>
        .box {

            position: absolute;

            width: 200px;
            height: 200px;
            /* margin: 0 auto; */

            cursor: move;

            background-color: pink;
        }
    style>

head>

<body>

    <div class="box">
    div>


    <script>

        var box = document.querySelector('.box');

        // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        box.addEventListener('mousedown', function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // console.log(x);
            // console.log(y);

            document.addEventListener('mousemove', move);

            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            function move(e) {
                box.style.left = e.pageX - x + 'px';
                box.style.top = e.pageY - y + 'px';

                console.log(e.pageX - x + 'px');
                console.log(e.pageX - y + 'px');
            }

            // （3）鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })

        })

    script>

body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

相关阅读:
同步、异步
(02)Cartographer源码无死角解析-(20) MapBuilder→MapBuilder()构造函数
Java 8 要过时了？从JDK8飞升到JDK17，一次性给你讲明白
【java筑基】IO流基础之文件的常见操作
从 React 源码彻底搞懂 Ref 的全部 api
OpenCV函数及类理解记录
公司文件防泄密软件——「天锐绿盾」@德人合科技
2022最新前端vue面试题
springboot+共享电动单车管理系统毕业设计-附源码131016
PHP写一个电商Api接口需要注意哪些？考虑哪些？

原文地址：https://blog.csdn.net/qq_43472877/article/details/126119004