码迷,mamicode.com
首页 > 其他好文 > 详细

图片拖拽的继承,引用 2

时间:2017-09-01 21:21:11      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:get   方法   构造   tle   span   原型   top   his   cli   

//Drag.js

window.onload=function(){
    new Drag("box1")
}
//第四步:全局变量变成属性  该加this加this
//        var oDiv=null;
//        var disX=0;
//        var disY=0;
//第三步:Window.onload改成构造函数
function Drag(id){
    this.disX=0
    this.disY=0
    var _this=this;
    this.oDiv=document.getElementById(id);
    this.oDiv.onmousedown=function(){
        //第六步 修改当前的从属关系
        _this.fnDown()
    };
}
//第五步:把函数改为Drag原型方法
Drag.prototype.fnDown=function(ev){
    var _this=this;
    var oEvent=ev||event;
    this.disX = oEvent.clientX-this.oDiv.offsetLeft;
    this.disY = oEvent.clientY-this.oDiv.offsetTop;
    document.onmousemove=function(ev){
        _this.fnMove(ev)
    }
    document.onmouseup=function(){
        _this.fnUp()
    }
}
Drag.prototype.fnMove=function(ev){
    var oEvent=ev||event;
    this.oDiv.style.left=oEvent.clientX-this.disX+‘px‘;
    this.oDiv.style.top=oEvent.clientY-this.disY+‘px‘;
}
Drag.prototype.fnUp=function(){
    document.onmousemove=null;
    document.onmouseup=null;
}

 

图片拖拽的继承,引用 2

标签:get   方法   构造   tle   span   原型   top   his   cli   

原文地址:http://www.cnblogs.com/mylove0/p/7465036.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!