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

时间：2023-03-08 23:06:07
[javascript]一种兼容性比较好的简单拖拽

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

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

面向过程的写法

<!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>

 创建一个拖拽对象

<!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>

相关文章