JavaScript面向对象的程序开发之拖拽Demo讲解——xyp_hf

来源：互联网发布：ssd数据迁移编辑：程序博客网时间：2024/05/06 05:38
<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>面向对象的拖拽</title><style>#div1{width:100px;height:100px;background:red;position:absolute;}</style><script type="text/javascript">/*    //先用普通方式写个拖拽    window.onload = function(){        var oDiv = document.getElementById('div1');        var disX = 0;        var disY = 0;        oDiv.onmousedown = function(){            var ev = ev || window.event;            disX = ev.clientX - oDiv.offsetLeft;            disY = ev.clientY - oDiv.offsetTop;            document.onmousemove = function(ev){                var ev = ev || event;                oDiv.style.left = ev.clientX - disX + 'px';                oDiv.style.top = ev.clientY - disY + 'px';            };            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;            }            return false;        };    }*//*    // 再变型      var oDiv = null;    var disX = 0;    var disY = 0;    window.onload = function(){        //3、提取全局变量        oDiv = document.getElementById('div1');        //4、将onload中非赋值语句放到初始化函数当中,并在此调用        init();    }    function init(){        //1、取消函数嵌套函数,将此处的函数拿出去        oDiv.onmousedown = fnDown;    }    function fnDown(){        var ev = ev || window.event;        disX = ev.clientX - oDiv.offsetLeft;        disY = ev.clientY - oDiv.offsetTop;        //2、取消函数嵌套函数,将此处的函数拿出去,在此处调用        document.onmousemove = fnMove;        document.onmouseup = fnUp;        return false;    }    function fnMove(ev){        var ev = ev || event;        oDiv.style.left = ev.clientX - disX + 'px';        oDiv.style.top = ev.clientY - disY + 'px';    }    function fnUp(){        document.onmousemove = null;        document.onmouseup = null;    }*///再写成面向对象的方式window.onload = function(){    var d1 = new Drag('div1');    d1.init();};function Drag(id){    this.oDiv = document.getElementById(id);    this.disX = 0;    this.disY = 0;}Drag.prototype.init = function(){    var This = this;    this.oDiv.onmousedown = function(ev){        var ev = ev || window.event;        This.fnDown(ev);        return false;    };};Drag.prototype.fnDown = function(ev){    var This = this;    this.disX = ev.clientX - this.oDiv.offsetLeft;    this.disY = ev.clientY - this.oDiv.offsetTop;    document.onmousemove = function(ev){        var ev = ev || event;        This.fnMove(ev);    };    document.onmouseup = this.fnUp;};Drag.prototype.fnMove = function(ev){    this.oDiv.style.left = ev.clientX - this.disX + 'px';    this.oDiv.style.top = ev.clientY - this.disY + 'px';};Drag.prototype.fnUp = function(){    document.onmousemove = null;    document.onmouseup = null;};</script></head><body>    <div id="div1"></div></body></html>
阅读全文
0 0