js实现拖动效果

1. 拖动demo1-盒子可拖动

<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>拖动demo1-盒子可拖动title>
    <style>
        .box {
            width: 20px;
            height: 20px;
            background-color: rgb(247, 196, 196);
            border: 1px solid rgb(252, 153, 153);
            cursor: pointer;
            position: relative;
        }
    style>
head>

<body>
    
    <div class="box" id="drag">

    div>
    <script>
        let dragDom = document.getElementById('drag')
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
        // 鼠标在移动盒子上按下
        dragDom.onmousedown = function (e) {
            console.log('鼠标按下事件')
            dragDom.style.backgroundColor = 'rgb(196, 217, 247)'
            dragDom.style.border = 'rgb(153, 196, 252)'
            dragDom.style.cursor = 'move'

            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX
            const disY = e.clientY

            // 获取到的值带px 正则匹配替换
            let styL = null
            let styT = null

            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
            if (sty.left.includes('%')) {
                styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
                styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
            } else {
                styL = +sty.left.replace(/\px/g, '')
                styT = +sty.top.replace(/\px/g, '')
            }

            document.onmousemove = function (e) {
                e.preventDefault() // 移动时禁用默认事件

                // 通过事件委托，计算移动的距离
                const l = e.clientX - disX
                const t = e.clientY - disY

                // 移动当前元素
                dragDom.style.left = `${l + styL}px`
                dragDom.style.top = `${t + styT}px`
            }

            document.onmouseup = mouseUp
        }

        // 鼠标抬起
        function mouseUp() {
            console.log('鼠标抬起事件')
            dragDom.style.backgroundColor = 'rgb(247, 196, 196)'
            dragDom.style.border = 'rgb(252, 153, 153)'
            dragDom.style.cursor = 'pointer'

            document.onmousemove = null
            document.onmouseup = null
        }

        dragDom.oncontextmenu = function () {
            return false
        }
    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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

在这里插入图片描述

2. 拖动demo2-有拖动范围

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>拖动demo2-有拖动范围title>
    <style>
        .box {
            width: 90%;
            height: calc(100vh - 120px);
            border: 1px solid red;
            box-sizing: border-box;
            display: flex;
            margin-top: 20px;
            margin-left: 60px;
        }

        .menu {
            width: 200px;
            height: 100%;
            background-color: rgb(252, 213, 213);
        }

        .dragBox {
            position: relative;
            flex: 1;
            background-color: rgb(252, 234, 213);
        }

        .dragDom {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: rgb(141, 188, 226);
            top: 10px;
            left: 20px;
            cursor: pointer;
        }
    style>
head>

<body>
    <div class="box">
        <div class="menu">

        div>
        <div class="dragBox" id="dragBox">
            <div class="dragDom" id="dragDom">

            div>
        div>
    div>
body>
<script>
    const dragBox = document.getElementById('dragBox')
    const dragDom = document.getElementById('dragDom')

    // 获取拖动区域的 边界
    const dragBoxSty = dragBox.currentStyle || window.getComputedStyle(dragBox, null)

    console.log(dragBox.getBoundingClientRect())
    const boundaryL = dragBox.getBoundingClientRect().left
    const boundaryT = dragBox.getBoundingClientRect().top
    const boundaryR = dragBox.getBoundingClientRect().right
    const boundaryB = dragBox.getBoundingClientRect().bottom

    // 浏览器窗口的宽高
    const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;


    console.log('boundaryL:', boundaryL, 'boundaryT:', boundaryT, 'boundaryR:', boundaryR, 'boundaryB:', boundaryB,
        clientWidth, clientHeight)

    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

    // 鼠标按下
    dragDom.onmousedown = function (e) {
        dragDom.style.backgroundColor = 'rgb(247, 196, 196)'
        dragDom.style.cursor = 'move'

        // 获取元素当前距离可视区的距离
        const disX = e.clientX
        const disY = e.clientY
        // 获取到的值带px 正则匹配替换
        let styL = null
        let styT = null

        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (sty.left.includes('%')) {
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
        } else {
            styL = +sty.left.replace(/\px/g, '')
            styT = +sty.top.replace(/\px/g, '')
        }

        document.onmousemove = function (e) {
            e.preventDefault() // 移动时禁用默认事件
            // 通过事件委托，计算移动的距离
            const l = e.clientX - disX
            const t = e.clientY - disY

            // 获取当前要设置的
            const left = l + styL
            const top = t + styT

            if (e.clientX < boundaryL) {
                dragDom.style.left = `0px`
            } else if (e.clientX > boundaryR) {
                dragDom.style.left = `${dragBoxSty.width-sty.width}px`
            } else {
                dragDom.style.left = `${left}px`
            }

            if (e.clientY < boundaryT) {
                dragDom.style.top = `0px`
            } else if (e.clientY > boundaryB) {
                dragDom.style.top = `${dragBoxSty.height}px`
            } else {
                dragDom.style.top = `${top}px`
            }
        }

        document.onmouseup = mouseUp
    }

    // 鼠标抬起
    function mouseUp() {
        console.log('鼠标抬起事件')
        dragDom.style.backgroundColor = 'rgb(141, 188, 226)'
        dragDom.style.cursor = 'pointer'

        document.onmousemove = null
        document.onmouseup = null
    }

    dragDom.oncontextmenu = function () {
        return false
    }
script>

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

效果：盒子在橙色区域可拖动
在这里插入图片描述

4. demo3-拖动物体大于盒子

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>拖动demo3-拖动物体大于盒子title>
        <style>
            .box {
                width: 90%;
                height: calc(100vh - 120px);
                border: 1px solid red;
                box-sizing: border-box;
                display: flex;
                margin-top: 20px;
                margin-left: 60px;
            }

            .menu {
                width: 200px;
                height: 100%;
                background-color: rgb(252, 213, 213);
            }

            .content {
                flex: 1;
                display: flex;
                justify-content: center;
                background-color: rgb(252, 234, 213);
            }

            .dragBox {
                position: relative;
                width: 600px;
                height: 500px;
                background-color: rgb(234, 252, 213);
                border: 1px solid rgb(115, 221, 224);
                overflow: hidden;
            }

            .dragDom {
                position: absolute;
                width: 900px;
                height: 800px;
                text-align: center;
                line-height: 30px;
                top: 0px;
                left: 0px;
                cursor: pointer;
            }

            .dragDom > img {
                width: 900px;
                height: 800px;
            }
        style>
    head>

    <body>
        <div class="box">
            <div class="menu">div>
            <div class="content">
                <div class="dragBox" id="dragBox">
                    <div class="dragDom" id="dragDom">
                        <img src="./1.png" alt="" />
                    div>
                div>
            div>
        div>
    body>
    <script>
        const dragBox = document.getElementById("dragBox")
        const dragDom = document.getElementById("dragDom")

        // 获取拖动区域的 边界
        const dragBoxSty = dragBox.currentStyle || window.getComputedStyle(dragBox, null)
        const dragDomSty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

        // 浏览器窗口的宽高
        const clientWidth = document.documentElement.clientWidth || document.body.clientWidth
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight

        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

        // 鼠标按下
        dragDom.onmousedown = function (e) {
            // dragDom.style.backgroundColor = "rgb(247, 196, 196)"
            dragDom.style.backgroundColor = "rgb(255, 254, 242)"
            dragDom.style.cursor = "move"

            // 获取元素当前距离可视区的距离
            const disX = e.clientX
            const disY = e.clientY
            // 获取到的值带px 正则匹配替换
            let styL = null
            let styT = null

            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
            if (sty.left.includes("%")) {
                styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100)
                styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100)
            } else {
                styL = +sty.left.replace(/\px/g, "")
                styT = +sty.top.replace(/\px/g, "")
            }

            document.onmousemove = function (e) {
                e.preventDefault() // 移动时禁用默认事件
                // 通过事件委托，计算移动的距离
                const l = e.clientX - disX
                const t = e.clientY - disY

                // console.log("移动的距离", l, t)

                // 获取当前要设置的
                const left = l + styL
                const top = t + styT
                // console.log("要设置的距离", left, top)

                if (left > 0) {
                    dragDom.style.left = `0px`
                } else if (left < -300) {
                    dragDom.style.left = `-300px`
                } else {
                    dragDom.style.left = `${left}px`
                }

                if (top > 0) {
                    dragDom.style.top = `0px`
                } else if (top < -300) {
                    dragDom.style.top = `-300px`
                } else {
                    dragDom.style.top = `${top}px`
                }
            }

            document.onmouseup = mouseUp
        }

        // 鼠标抬起
        function mouseUp() {
            console.log("鼠标抬起事件")
            // dragDom.style.backgroundColor = "rgb(141, 188, 226)"
            dragDom.style.background = "none"
            dragDom.style.cursor = "pointer"

            document.onmousemove = null
            document.onmouseup = null
        }

        dragDom.oncontextmenu = function () {
            return false
        }
    script>
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

效果：拖动图片在中间盒子里显示区域内容
在这里插入图片描述

相关阅读:
高度磷酸化的tau蛋白（p-tau）介绍
 WasmEdge 0.10.0 发布！全新的插件扩展机制、Socket API 增强、LLVM 14 支持
 瑞吉外卖实战项目全攻略——第二天
 什么是 Azuki NFT 系列？
Unity中的序列化和反序列化
 ［网络安全］实操DVWS靶场复现CSRF漏洞
 深度解读面试题：链表中环的入口结点（附代码，可过在线OJ）
Jupyter NoteBook 中使用 cv2.imshow 显示图片
 企业为什么要注册商标?注册商标有什么好处？
c++内存管理
原文地址：https://blog.csdn.net/weixin_44801790/article/details/126419970