一种兼容性比较好的简单拖拽

发表于   |   分类于   |  

作为一个马上要找工作、非计算机专业、热爱前端的大四狗，最近开始疯狂写demo、看书，准备九、十月份的校招。

晚上用js实现了一个比较简单（low）的拖拽效果，初步测试兼容性还是不错的，于是写一段小博文记录下~大神求轻喷

面向过程的写法

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        window.onload = function (){
            var disX = 0;
            var disY = 0;
            var oBox = document.getElementById("box");
            oBox.onmousedown = function (ev){
                var oEvent = ev || event;

                oBox.style.cursor = "move";
                disX = oEvent.clientX - oBox.offsetLeft;
                disY = oEvent.clientY - oBox.offsetTop;

                document.onmousemove = function (ev){
                    var oEvent = ev || event;
                    var theLeft = oEvent.clientX - disX;
                    var theTop = oEvent.clientY - disY;
                    
                    // 禁止用户从浏览器左框拖出
                    if (theLeft < 0) {
                        theLeft = 0;
                    } else if (theLeft > document.documentElement.clientWidth-
                        oBox.offsetWidth) {
                        theLeft = document.documentElement.clientWidth-
                        oBox.offsetWidth;
                    } else if (theTop < 0) {
                        theTop = 0;
                    } else if (theTop > document.documentElement.clientHeight-
                        oBox.offsetHeight) {
                        theTop = document.documentElement.clientHeight-
                        oBox.offsetHeight;
                    }
                    oBox.style.left = theLeft + 'px';
                    oBox.style.top = theTop + 'px';
                }

            }

            document.onmouseup = function (){
                document.onmousemove =null;
            }
    　　　　 // 窗口重设大小时的处理方法
            window.onresize = function (){
                oBox.style.left = document.documentElement.clientWidth/2-oBox.offsetWidth/2 + 'px';
                oBox.style.top = document.documentElement.clientHeight/2-oBox.offsetHeight/2 + 'px';
            }
            // 兼容firefox 3.6.19
            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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box,#box2 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="box2"></div>
    <script>
        window.onload = function (){
            new Drag("box");
            new Drag("box2");
        }

        function Drag(id){
            var _this = this;
            
            this.disX = 0;
            this.disY = 0;
            this.oBox = document.getElementById(id);

            
            this.oBox.onmousedown = function (ev){
                _this.fnDown(ev);
                
                // 兼容firefox 3.6.19
                return false;
            };


            document.onmouseup = function (){
                _this.fnUp();
            }
            window.onresize = function (){
                _this.fnResize();
            };
            // 兼容firefox 3.6.19
            return false;
        }

        Drag.prototype.fnDown = function(ev){

            var oEvent = ev || event;
            var _this = this;
            this.oBox.style.cursor = "move";
            this.disX = oEvent.clientX - this.oBox.offsetLeft;
            this.disY = oEvent.clientY - this.oBox.offsetTop;

            document.onmousemove = function (ev){
                _this.fnMove(ev);
            };

        }
        
        Drag.prototype.fnMove = function(ev){
            var oEvent = ev || event;
            var theLeft = oEvent.clientX - this.disX;
            var theTop = oEvent.clientY - this.disY;
            // 禁止用户从浏览器左框拖出
            if (theLeft < 0) {
                theLeft = 0;
            } else if (theLeft > document.documentElement.clientWidth-
                this.oBox.offsetWidth) {
                theLeft = document.documentElement.clientWidth-
                this.oBox.offsetWidth;
            } 
            if (theTop < 0) {
                theTop = 0;
            } else if (theTop > document.documentElement.clientHeight-
                this.oBox.offsetHeight) {
                theTop = document.documentElement.clientHeight-
                this.oBox.offsetHeight;
            }
            this.oBox.style.left = theLeft + 'px';
            this.oBox.style.top = theTop + 'px';
        }

        Drag.prototype.fnUp = function (){
            document.onmousemove =null;
        }

        

        Drag.prototype.fnResize = function(){
            this.oBox.style.left = document.documentElement.clientWidth/2-this.oBox.offsetWidth/2 + 'px';
            this.oBox.style.top = document.documentElement.clientHeight/2-this.oBox.offsetHeight/2 + 'px';
        }
    </script>
</body>
</html>