Js使用面向对象和面向过程的方法实现拖拽物体的效果

1.面向过程的拖拽实现代码:

<!DOCTYPE html>
<html>
<head>
    <title>drag Div</title>
    <style type="text/css">
        #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(ev){
                var oEvent=ev||event;
                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;
                document.onmousemove=function(ev){
                var oEvent=ev||event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
                if (l<0)
                 {l=0;}
                else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                }
                    if (t<0)
                 {t=0;}
                else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                    l=document.documentElement.clientHeight-oDiv.offsetHeight;
                }

                oDiv.style.left=l+‘px‘;
                oDiv.style.top=t+‘px‘;
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
        };

        return false;

    };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

2.面向对象的实现方法,只用新建对象,可以实现多个div的拖拽运动

<!DOCTYPE html>
<html>
<head>
    <title>drag Div</title>
    <style type="text/css">
        #div1{width: 100px;height: 100px;background: red;position: absolute;}
        #div2{width: 100px;height: 100px;background: yellow;position: absolute;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        new Drag(‘div1‘);
        new Drag(‘div2‘);
    }

        function Drag(id){
            var _this=this;
            this.disX=0;
            this.dixY=0;
            this.oDiv=document.getElementById(id);
            this.oDiv.onmousedown=function()
            {
                _this.fnDown();
            };

        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(){
                    _this.fnMove();
                };
            document.onmouseup=function(){
                _this.fnUp();
            };
        };
Drag.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;
                }
                    if (t<0)
                 {t=0;}
                else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight){
                    l=document.documentElement.clientHeight-this.oDiv.offsetHeight;
                }

                this.oDiv.style.left=l+‘px‘;
                this.oDiv.style.top=t+‘px‘;
            };
Drag.prototype.fnUp=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            };
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

原文地址:https://www.cnblogs.com/cheryshi/p/8494236.html

时间: 2024-10-06 14:46:57

Js使用面向对象和面向过程的方法实现拖拽物体的效果的相关文章

JavaSE——面向对象与面向过程、类与对象、(属性、方法、构造器)等

一:面向对象与面向过程 二者都是一种思想,面向对象是相对于面向过程而言的. 面向过程: 1.面向过程思想强调的是过程(动作). 2.在面向过程的开发中,其实就是面向着具体的每一个步骤和过程,把每一个步骤和过程完成,然而由这些功能方法相互调用,完成需求. 3.面向过程的典型代表语言是:C语言. 面向对象: 1.把步骤和方法封装起来,根据不同的功能,进行不同的封装,用的时候,找到对应的类就可以了. 2.将功能封装进对象,强调具备了功能的对象.这就是面向对象的思想.典型的语言是:C++,Java. 3

大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论(OO Vs 过程)------(一个简单的实例引发的沉思)

一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认知方式和思考方式.对于复杂的事物,人类是如何去认识.归纳.总结的?面向对象式编程就是在努力回答这个问题,而答案的核心就是两个字:抽象.所以面向对象式编程特别适合处理业务逻辑,因此被广泛应用于目前的软件开发当中.因为我们开发软件就是为了解决问题,面向对象式编程符合人类对于“问题”的认知方式),因为我早

面向对象和面向过程,python中的类class,python中程序的入口——main方法,

1.程序入口,让main显现出来: print(__name__)#__name___是模块中的隐藏字段,当前模块运行的函数名 if __name__ == __main__ __main__() #定义程序入口:Python中main函数默认是隐藏的,main函数在当前运行的模块下,定义程序入口就是让main函数显 #现出来 def __main__(): ....... 2.面向对象和面向过程: 面向对象:使用对象完成任务,不需要在意过程: 3.什么是类:一个类型,定义class来表示一个类

心得 : 面向对象和面向过程的区别

面向对象:用线性的思维.与面向过程相辅相成.在软件开发过程中,宏观上,用面向对象来把握事物间复杂的关系,分析系统.微观上,仍然使用面向过程. "面向过程"是一种是事件为中心的编程思想.就是分析出解决问题所需的步骤,然后用函数把这写步骤实现,并按顺序调用. "面向对象"是以"对象"为中心的编程思想. 简单的举个例子:汽车发动.汽车到站.汽车启动是一个事件,汽车到站是另一个事件,面向过程编程的过程中我们关心的是事件,而不是汽车本身.针对上述两个事件,

面向对象与面向过程

一.面向对象与面向过程的区别: 二者都是一种思想,面向对象是相对于面向过程而言的.面向过程,强调的是功能行为.面向对象,将功能封装进对象,强调具备了功能的对象.面向对象更加强调运用人类在日常的思维逻辑中采用的思想方法与原则. 二.面向对象的三大特征: ①封装(Encapsulation)②继承(Inheritance)③多态(Polymorphism) 面向对象简称OOP( Object Oriented Programming) 面向过程(procedure oriented programm

面向对象和面向过程的区别

面向对象和面向过程 1.面向过程程序设计方法的实质上是从计算机处理问题的观点来进行程序设计工作:输入——运算——输出.面向过程程序设计者需要变更习惯的思维方法以贴近 计算机的内部工作机理.面向过程程序设计所具有的流的工作性质,试图通过信息流及其转换来认识系统,不仅加大了程序设计的难度,同时亦使得程序的可理解性 比较差. 面向对象程序设计方法中,一种普遍采用的优化方法是使用结构化的程序设计方法. 面向过程程序设计方法一般适宜采用自上而下的设计方法. 面向过程程序设计方法需要在一开始就全面的,自上而

编程思想:面向对象和面向过程

感觉写的不够深入,不过基本可行,转载自:http://www.cnblogs.com/BeiGuo-FengGuang/p/5935763.html 何谓面向对象?何谓面向过程?对于这编程界的两大思想,一直贯穿在我们学习和工作当中.我们知道面向过程和面向对象,但要让我们讲出来个所以然,又感觉是不知从何说起,最后可能也只会说出一句就是那样啦,你知道啦.而这种茫然,其实就是对这两大编程思想的迷糊之处.本文通过学生到校报道注册的实例,阐述了面向过程和面向对象两大思想.希望能对你的学习和工作有所帮助.

面向对象和面向过程的编程方式的理解

面向对象和面向过程的区别? 如果说面向对象和面向过程的具体区别,最深入的地方应该是去看设计模式,推荐大话设计模式那本书,讲的比较好.本人只不过简单叙述下,重点是如何进行面向对象和面向过程的编程,只有会编程了,才能真正懂得面向对象和面向过程的区别.否则都是纸上谈兵. 面向过程:是以计算机线性思维的方式进行编程.一步一个脚印的执行.本身也没有问题,但是如果遇到需求多变的情况,或者功能的添加和删除,将极其影响原来的程序代码,必须要重写或者修改,或者重新组织原来的代码. 面向对象:在对需求多变的时候,不

浅析面向对象和面向过程

对象:是一个类的实例,具有本身的状态和行为. 类:具有相同行为和特征的对象的抽象就是类,(对象的抽象是类,类的具体化是对象) 属性:所有类中对象所具有的性质 面向对象的三大特性:继承.封装.多态 面向对象是以事物为中心的编程思想,主要是把事物给对象化,对象包括行为和属性: 面向过程是以过程为中心的编程思想,注重从上往下的一个流程化,模块化的思想方法,当程序规模不是很大的时候用面向过程的方法更能体现出优势, 按着模块与函数的方法可以更好的组织