原生 JavaScript 实现 div 随意拖拽原生 JavaScript 实现 div 随意拖拽

最近在做一个可拖拽组件，在这里做下总结，以便使用。主要思想：鼠标的clienX/clientY相对值设置为父元素的left/top的相对值。

<!DOCTYPE html>
<html>
    <head>　　　　
        <meta charset="UTF-8">
        <title>Drag</title>
        <style>
            #box {
                width: 60px;
                height: 60px;
                background-color: #15db95;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="warp">
             <div id="box"></div>　
        </div>　　
    </body>
    <script src="./drag.js"></script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

方法一：js部分（drag.js）

window.onload = function () {
    let divDom = document.getElementById("box");
    divDom.onmousedown = function (ev) {
        let oevent = ev || event;
        let distanceX = oevent.clientX - divDom.offsetLeft;
        let distanceY = oevent.clientY - divDom.offsetTop;

        document.onmousemove = function (ev) {
            let oevent = ev || event;
            divDom.style.left = oevent.clientX - distanceX + 'px';
            divDom.style.top = oevent.clientY - distanceY + 'px';
        };
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方法二：js部分（drag.js）

window.onload = function () {
    //获取元素
    let dv = document.getElementById('box');
    let x = 0;
    let y = 0;
    let l = 0;
    let t = 0;
    let isDown = false;
    //鼠标按下事件
    dv.onmousedown = function(e) {
        //获取x坐标和y坐标
        x = e.clientX;
        y = e.clientY;

        //获取左部和顶部的偏移量
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //开关打开
        isDown = true;
        //设置样式  
        dv.style.cursor = 'move';
    }
    //鼠标移动
    window.onmousemove = function(e) {
        if (isDown == false) {
            return;
        }
        //获取x和y
        let nx = e.clientX;
        let ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        let nl = nx - (x - l);
        let nt = ny - (y - t);

        dv.style.left = nl + 'px';
        dv.style.top = nt + 'px';
    }
    //鼠标抬起事件
    dv.onmouseup = function() {
        //开关关闭
        isDown = false;
        dv.style.cursor = 'default';
    }
};

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

方法三：js部分（drag.js）

let dragBox = function (drag, wrap) {

    function getCss(ele, prop) {
        return parseInt(window.getComputedStyle(ele)[prop]);
    }

    let initX,
        initY,
        dragable = false,
        wrapLeft = getCss(wrap, "left"),
        wrapRight = getCss(wrap, "top");

    drag.addEventListener("mousedown", function (e) {
        dragable = true;
        initX = e.clientX;
        initY = e.clientY;
    }, false);

    document.addEventListener("mousemove", function (e) {
        if (dragable === true) {
            let nowX = e.clientX,
                nowY = e.clientY,
                disX = nowX - initX,
                disY = nowY - initY;
            wrap.style.left = wrapLeft + disX + "px";
            wrap.style.top = wrapRight + disY + "px";
        }
        console.log();
    });

    drag.addEventListener("mouseup", function (e) {
        dragable = false;
        wrapLeft = getCss(wrap, "left");
        wrapRight = getCss(wrap, "top");
    }, false);

};
dragBox(document.querySelector("#warp"), document.querySelector("#box"));

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

#JavaScript

上次更新: 2024/01/30, 00:35:17

← 十六(16)进制与rgb颜色转换原生 JS 实现页面树形（tree）菜单展示功能→