面向对象的继承与修改（拖拽实例）

最新推荐文章于 2020-01-29 16:33:19 发布

FireBird_one

最新推荐文章于 2020-01-29 16:33:19 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 常用知识文章标签：面向对象继承

本文链接：https://blog.youkuaiyun.com/FireBird_one/article/details/72770822

JS 常用知识专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现元素拖拽效果的方法，并进一步扩展到带有边界限制的拖拽功能。通过对鼠标事件的监听和响应，使得指定的DOM元素能够跟随鼠标进行移动。此外，还提供了一个受限范围内的拖拽实例，确保元素不会移出可视区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.onload = function () {
    new Drag("div1");
    new LimiteDrag("div12");
};

/////////////正常的没有限制范围的Drag函数////////////////////

function Drag(id) {
    this.oDiv = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
    var _this = this;
    this.oDiv.onmousedown = function(){
        _this.fnDown();
    };
};
Drag.prototype.fnDown = function(ev) {
    var ev = ev || window.event;
    var _this = this;
    this.disX = ev.clientX - this.oDiv.offsetLeft;
    this.disY = ev.clientY - this.oDiv.offsetTop;
    document.onmousemove = function(){
        _this.fnMove();
    };
    document.onmouseup = function(){
        _this.fnUp();
    };
};
Drag.prototype.fnMove = function(ev) {
    var ev = ev || window.event;
    this.oDiv.style.left = ev.clientX - this.disX + "px";
    this.oDiv.style.top = ev.clientY - this.disY + "px";
};
Drag.prototype.fnUp = function() {
    document.onmousemove = document.onmouseup = null;
};


/////////继承Drag对象，并添加限制范围的方法，变成新的LimiteDrag函数///////////

function LimiteDrag(id) {
    Drag.call(this,id);   // 第一步:执行Drag函数，通过Call(this)来改变this指向
};

for(var i in Drag.prototype){  // 第二步:浅拷贝，拷贝Drag上面所有的原型方法
    LimiteDrag.prototype[i] = Drag.prototype[i];
};

LimiteDrag.prototype.fnMove = function(ev) { // 第三步:覆盖并改变从Drag上面拷贝过来的fnMove方法
    var ev = ev || window.event;
    var l = ev.clientX - this.disX;
    var t = ev.clientY - this.disY;
    if(l < 0){
        l = 0;
    }else if(l > document.documentElement.clientWidth - this.oDiv.offsetWidth){
        l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
    };
    if(t < 0){
        t = 0;
    }else if(t > document.documentElement.clientHeight - this.oDiv.offsetHeight){
        t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
    };
    this.oDiv.style.left = l + "px";
    this.oDiv.style.top = t + "px";
};