今晚买四不像:js达成拖拽效果,js达成拖拽

作者: 关于计算机  发布:2019-09-06

首先来了解一下,面向对象练习的基本规则和问题:

js实现拖拽效果,js实现拖拽

首先来了解一下,面向对象练习的基本规则和问题:

先写出普通的写法,然后改成面向对象写法项
普通方法变形

·尽量不要出现函数嵌套函数
·可以有全局变量
·把onload函数中不是赋值的语句放到单独函数中

改成面向对象

·全局变量就是属性
·函数就是方法
·onload中创建对象
·改this指针问题

先把拖拽效果的布局完善好:
HTML结构:

<div id="box"></div>

csc样式:
#box{position: absolute;width: 200px;height: 200px;background: red;}

第一步,首先把面向过程的拖拽回顾一下

复制代码 代码如下:

window.onload = function (){
    // 获取元素和初始值
    var oBox = document.getElementById('box'),
        disX = 0, disY = 0;
    // 容器鼠标按下事件
    oBox.onmousedown = function (e){
        var e = e || window.event;
        disX = e.clientX - this.offsetLeft;
        disY = e.clientY - this.offsetTop;
        document.onmousemove = function (e){
            var e = e || window.event;
            oBox.style.left = (e.clientX - disX) + 'px';
            oBox.style.top = (e.clientY - disY) + 'px';
        };
        document.onmouseup = function (){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
};

第二步,把面向过程改写为面向对象

复制代码 代码如下:

window.onload = function (){
    var drag = new Drag('box');
    drag.init();
};
// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}
Drag.prototype.init = function (){
    // this指针
    var me = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);
        // 阻止默认事件
        return false;
    };
};
Drag.prototype.mouseDown = function (e){
    // this指针
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;
    document.onmousemove = function (e){
        var e = e || window.event;
        me.mouseMove(e);
    }; 
    document.onmouseup = function (){
        me.mouseUp();
    }
};
Drag.prototype.mouseMove = function (e){
    this.obj.style.left = (e.clientX - this.disX) + 'px';
    this.obj.style.top = (e.clientY - this.disY) + 'px';
};
Drag.prototype.mouseUp = function (){
    document.onmousemove = null;
    document.onmouseup = null;
};

第三步,看看代码有哪些不一样

首页使用了构造函数来创建一个对象:

复制代码 代码如下:

// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}

遵守前面的写好的规则,把全局变量都变成属性!

然后就是把函数都写在原型上面:

复制代码 代码如下:

Drag.prototype.init = function (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = function (){
};

先来看看init函数:

复制代码 代码如下:

Drag.prototype.init = function (){
    // this指针
    var me = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);
        // 阻止默认事件
        return false;
    };
};

我们使用me变量来保存了this指针,为了后面的代码不出现this指向的错误

接着是mouseDown函数:

复制代码 代码如下:

Drag.prototype.mouseDown = function (e){
    // this指针
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;
    document.onmousemove = function (e){
        var e = e || window.event;
        me.mouseMove(e);
    }; 
    document.onmouseup = function (){
        me.mouseUp();
    }
};

改写成面向对象的时候要注意一下event对象。因为event对象只出现在事件中,所以我们要把event对象保存变量,然后通过参数传递!

后面的mouseMove函数和mouseUp函数就没什么要注意的地方了!

要注意的问题

关于this指针的问题,面向对象里面this特别重要!
this拓展阅读:

关于event对象的问题,event对象只出现在事件里面,所以写方法的时候要注意一下!

首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变...

先写出普通的写法,然后改成面向对象写法项
普通方法变形

·尽量不要出现函数嵌套函数
·可以有全局变量
·把onload函数中不是赋值的语句放到单独函数中

改成面向对象

·全局变量就是属性
·函数就是方法
·onload中创建对象
·改this指针问题

先把拖拽效果的布局完善好:
HTML结构:

<div id="box"></div>

csc样式:
#box{position: absolute;width: 200px;height: 200px;background: red;}

第一步,首先把面向过程的拖拽回顾一下

复制代码 代码如下:

window.onload = function (){
    // 获取元素和初始值
    var oBox = document.getElementById('box'),
        disX = 0, disY = 0;
    // 容器鼠标按下事件
    oBox.onmousedown = function (e){
        var e = e || window.event;
        disX = e.clientX - this.offsetLeft;
        disY = e.clientY - this.offsetTop;
        document.onmousemove = function (e){
            var e = e || window.event;
            oBox.style.left = (e.clientX - disX) + 'px';
            oBox.style.top = (e.clientY - disY) + 'px';
        };
        document.onmouseup = function (){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
};

第二步,把面向过程改写为面向对象

复制代码 代码如下:

window.onload = function (){
    var drag = new Drag('box');
    drag.init();
};
// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}
Drag.prototype.init = function (){
    // this指针
    var me = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);
        // 阻止默认事件
        return false;
    };
};
Drag.prototype.mouseDown = function (e){
    // this指针
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;
    document.onmousemove = function (e){
        var e = e || window.event;
        me.mouseMove(e);
    }; 
    document.onmouseup = function (){
        me.mouseUp();
    }
};
Drag.prototype.mouseMove = function (e){
    this.obj.style.left = (e.clientX - this.disX) + 'px';
    this.obj.style.top = (e.clientY - this.disY) + 'px';
};
Drag.prototype.mouseUp = function (){
    document.onmousemove = null;
    document.onmouseup = null;
};

第三步,看看代码有哪些不一样

首页使用了构造函数来创建一个对象:

复制代码 代码如下:

// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}

遵守前面的写好的规则,把全局变量都变成属性!

然后就是把函数都写在原型上面:

复制代码 代码如下:

Drag.prototype.init = function (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = function (){
};

先来看看init函数:

复制代码 代码如下:

Drag.prototype.init = function (){
    // this指针
    var me = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);
        // 阻止默认事件
        return false;
    };
};

我们使用me变量来保存了this指针,为了后面的代码不出现this指向的错误

接着是mouseDown函数:

复制代码 代码如下:

Drag.prototype.mouseDown = function (e){
    // this指针
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;
    document.onmousemove = function (e){
        var e = e || window.event;
        me.mouseMove(e);
    }; 
    document.onmouseup = function (){
        me.mouseUp();
    }
};

改写成面向对象的时候要注意一下event对象。因为event对象只出现在事件中,所以我们要把event对象保存变量,然后通过参数传递!

后面的mouseMove函数和mouseUp函数就没什么要注意的地方了!

要注意的问题

关于this指针的问题,面向对象里面this特别重要!
this拓展阅读:

关于event对象的问题,event对象只出现在事件里面,所以写方法的时候要注意一下!

您可能感兴趣的文章:

  • 利用JavaScript实现拖拽改变元素大小
  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
  • javascript实现拖拽并替换网页块元素
  • vuejs2.0运用原生js实现简单的拖拽元素功能示例
  • JavaScript实现拖拽网页内元素的方法
  • JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
  • 使用js实现的简单拖拽效果
  • javascript实现移动端上的触屏拖拽功能
  • js完美的div拖拽实例代码
  • JS实现基于拖拽改变物体大小的方法

本文由今晚买四不像发布于关于计算机,转载请注明出处:今晚买四不像:js达成拖拽效果,js达成拖拽

关键词: