js面向对象---拖拽

来源：互联网发布：淘宝1秒拦截软件有哪些编辑：程序博客网时间：2024/05/20 14:22
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            body{                position: relative;            }            #box{                position: absolute;                width: 150px;                height: 150px;                background: #f00;                cursor: default;            }            #box2{                position: absolute;                left: 300px;                top: 300px;                width: 150px;                height: 150px;                background: #00f;                cursor: default;            }        </style>    </head>    <body>        <div id="box"></div>        <div id="box2"></div>    </body>    <!--面向过程的写法-->    <!--<script type="text/javascript">        var oBox = document.getElementById('box');        var disX = 0;        var disY = 0;        oBox.onmousedown = function(ev){            var ev = ev || window.event;            var disX = ev.clientX -  oBox.offsetLeft;            var disY = ev.clientY -  oBox.offsetTop;            document.onmousemove = function(ev){                var ev = ev || window.event;                oBox.style.left = ev.clientX - disX + "px";                oBox.style.top = ev.clientY - disY + "px";            };            document.oonmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;            };            return false;        }    </script>-->    <!--面向过程改成面向对象的方法    1、onload里面创建实例使用方法    2、全局变量就是属性    3、函数就是方法    4、改变this指针,this指向object-->    <!--面向对象的写法-->    <script type="text/javascript">        window.onload = function(){            var d1 = new Drag('box');            d1.init();            var d2 = new Drag('box2');            d2.init();        }    //  构造函数    function Drag(id){        this.oBox = document.getElementById(id);        this.disX = 0;        this.disY = 0;    }    //方法            ev事件写在函数下面    Drag.prototype.init = function(){        var _this = this;        this.oBox.onmousedown = function(ev){            var ev = ev || window.event;            _this.fnDown(ev);        };    }    Drag.prototype.fnDown = function(ev){        var _this = this;        this.disX = ev.clientX -  this.oBox.offsetLeft;        this.disY = ev.clientY -  this.oBox.offsetTop;        document.onmousemove = function(ev){            var ev = ev || window.event;            _this.fnMove(ev);        };        document.onmouseup = function(){            _this.fnUp();        };        return false;    }    Drag.prototype.fnMove = function(ev){        this.oBox.style.left = ev.clientX - this.disX + "px";        this.oBox.style.top = ev.clientY - this.disY + "px";    }    Drag.prototype.fnUp = function(){        document.onmousemove = null;        document.onmouseup = null;    }    </script></html>
阅读全文
0 0