大致分为三个步骤：

  1. 鼠标摁下 onmousedown
  2. 鼠标移动 onmousemove

  3. 鼠标抬起 onmouseup

    注意的一点是 onmousemove事件和onmouseup事件是在onmousedown事件里面的

代码如下（不支持IE8及以下浏览器）：代码一

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        
        #box1 {
            width: 100px;
            height: 100px;
            background-color: #bbffaa;
            position: absolute;
            margin-left: 100px;
            z-index: 33;
        }
        
        #box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 300px;
            left: 300px;
        }
    </style>
    <script>
        window.onload = function() {

            var box1 = document.getElementById("box1");
            dary(box1);
            dary(box2);
        };

        function dary(obj) {
            // 为box设置鼠标按下事件  
            obj.onmousedown = function(event) {

                // 解决 event兼容性
                event = event || window.event;

                //元素上偏移量 = 鼠标.clientY-元素。offsetTop +元素的上外边距 
                //元素左偏移量 = 鼠标.clientX-元素。offsetleft +元素的下外边距
                var ot = event.pageY - obj.offsetTop + parseInt(getComputedStyle(obj, null)["margin-top"]);
                var ol = event.pageX - obj.offsetLeft + parseInt(getComputedStyle(obj, null)["margin-left"]);

                // 设置鼠标在box上的移动事件
                document.onmousemove = function(event) {
                    event = event || window.event;
                    // 获取鼠标的位置坐标
                    var top = event.pageY - ot;
                    var left = event.pageX - ol;
                    // 设置元素的位置
                    obj.style.top = top + "px";
                    obj.style.left = left + "px";
                };
                // 设置鼠标在box上的抬起事件
                document.onmouseup = function() {
                    // 当鼠标抬起时，取消onmousemove事件
                    document.onmousemove = null;
                    // 当鼠标抬起时，取消onmouseup事件
                    document.onmouseup = null;

                };

                /*
                        当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎汇总的搜索内容，
                        此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
                        如果不希望发生这个行为 ，则可以通过return false来取消默认行为
    
                        该方法解决对IE8及以下浏览器 不适用， 其他都好使
                    */
                return false;
            }
        };
    </script>
</head>

<body>
    <p>asdfasd</p>
    <div id="box1"></div>
    <div id="box2"></div>

</body>

</html>








愿你的坚持终有收获。