面向对象拖拽(子类继承)

Drag(父类)

function Drag(id){
    var _this = this;
    this.disX = 0;
    this.disY = 0;
    this.oDiv = document.getElementById(id);

    this.oDiv.onmousedown = function(ev){
        _this.fnDown(ev);
        return false;
    };
}

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;
}

/*window.onload=function(){
    var oDiv = document.getElementById(‘div1‘);

    oDiv.onmousedown=function(ev){
        var oEvent = ev || event;

        var disX = oEvent.clientX-oDiv.offsetLeft;
        var disY = oEvent.clientY-oDiv.offsetTop;

        document.onmousemove = function(ev){
            var oEvent = ev || event;

            oDiv.style.left = oEvent.clientX-disX+‘px‘;
            oDiv.style.top = oEvent.clientY-disY+‘px‘;
        };

        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };
    }
}*/

limitDrag(子类)

function LimitDrag(id){
    Drag.call(this, id);
}
for(var i in Drag.prototype){
    LimitDrag.prototype[i]=Drag.prototype[i];
}

LimitDrag.prototype.fnMove = function(ev){
    var oEvent = ev || event;
    var l = oEvent.clientX-this.disX;
    var t = oEvent.clientY-this.disY;

    if(l < 0){
        l=0;
    }else if(l > document.documentElement.clientWidth-this.oDiv.offsetWidth){
        l = document.documentElement.clientWidth-this.oDiv.offsetWidth;
    }

    this.oDiv.style.left = l +‘px‘;
    this.oDiv.style.top = t +‘px‘;
}
时间: 2024-10-16 04:01:43

面向对象拖拽(子类继承)的相关文章

Javascript面向对象拖拽

function Drag(id) { var _this=this; this.disX=0; this.disY=0; this.oDiv=document.getElementById(id); this.oDiv.onmousedown=function(e) { _this.fnDown(e); } } Drag.prototype.fnDown=function(e) { var _this=this; var e=e||event; this.disX=e.pageX-this.o

面向对象拖拽练习题

首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML 结构: <div id="box"></div> csc 样式: #box{position: absolute;width:

图片拖拽的继承,引用 3

//LimitDrag.js LimitDrag.prototype.fnMove=function(ev){ var oEvent=ev||event; var L= oEvent.clientX-this.disX var T= oEvent.clientY-this.disY if(L<0){ L=0 } else if(L>document.documentElement.clientWidth-this.oDiv.offsetWidth){ L=document.documentEl

图片拖拽的继承,引用 1 (需要引入2,3两个js才能运行)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="Drag.js"></script> <script src="LimitDrag.js"></script> <style

图片拖拽的继承,引用 2

//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.getElementB

用面向对象写一个拖拽,并实现继承

思路:先用面过过程的方法将要实现的效果实现出来,然后按照以下步骤将拆分成面向对象 //面向过程的程序改写成面向对象程序不能有函数嵌套 //将window.onload初始化整个程序改为构造函数初始化整个对象 //将面向过程中的变量改为属性 //将面向过程中的函数改为方法 index.html代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

android 拖拽listview

看源码: Pull-to-Refresh.Rentals-Android https://github.com/Yalantis/Pull-to-Refresh.Rentals-Android Android-PullToRefresh https://github.com/chrisbanes/Android-PullToRefresh 拿ListView分析 Pull-to-Refresh.Rentals-Android 拖拽view继承自linearlayout,拖拽方式是头尾添加定高的v

js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特点: ? 封装 : 看不到里面的东西 , 用好表面功能. ? 继承 : 从父类继承一些方法 , 属性 , 子类又有一些新的特性. ? 多态 ? 抽象 : 抽取一个功能里面多个核心的功能模块. ? 思想: 高内聚.低耦合 ? 低耦合 :每个功能模块之间耦合度要低 ? 高内聚 :模块内部要紧密相连 面向

面向对象的拖拽

1.创建一个div,并简单设置样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type=&qu