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>

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

  1. JS高级---体会面向对象和面向过程的编程思想

    体会面向对象和面向过程的编程思想 ChangeStyle是自定义的构造函数,再通过原型添加方法的函数. 实例化对象,导入json参数,和创建cs,调用原型添加的方法函数 过渡,先熟悉记忆 <!D ...

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

    一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认 ...

  3. 面向对象与面向过程 $this的注意事项和魔术方法set和get

    一.面向对象与面向过程的区别: 二者都是一种思想,面向对象是相对于面向过程而言的.面向过程,强调的是功能行为.面向对象,将功能封装进对象,强调具备了功能的对象.面向对象更加强调运用人类在日常的思维逻辑 ...

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

    一:面向对象与面向过程 二者都是一种思想,面向对象是相对于面向过程而言的. 面向过程: 1.面向过程思想强调的是过程(动作). 2.在面向过程的开发中,其实就是面向着具体的每一个步骤和过程,把每一个步 ...

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

    1.程序入口,让main显现出来: print(__name__)#__name___是模块中的隐藏字段,当前模块运行的函数名 if __name__ == __main__ __main__() # ...

  6. python的面向对象和面向过程

    一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...

  7. PHP面向对象和面向过程

    编程界不论是PHP.Python都有这么两种编程思想,oop面向对象.pop面向过程,这两种在功能上没有多大区别,但是在代码编写上却有很大区别.今天就记录一下面向对象和面向过程的优点.缺点.定义.实现 ...

  8. Day5-1 面向对象和面向过程

    摘要: 类的定义 类的增删改查 对象的增删改查 对象的查找和绑定 面向对象和面向过程的区别: 1.面向过程就像是工厂的流水线,按部就班的有序的工作. 优点:把复杂的问题简单化 缺点:可扩展性差.一个步 ...

  9. python面向对象和面向过程介绍与区别

    一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...

  10. python中的面向对象和面向过程

    一.面向对象和面向过程 一.什么是面向过程 核心是过程二字:面向过程是一种流水线的工作流程,是先做什么在做什么 二.什么是面向对象 核心 是对象二字:是一种编程思想,上帝思维,一切皆对象,编程中负责调 ...

随机推荐

  1. ABC326 A-F

    vp on 2023.11.12 A.B:略. C:双指针或者二分. D:暴搜+剪枝,每一行的计算量最多是 $60$. E:期望相关.计算每个点的概率,乘上这个点的权值,并求和即可. F:meet i ...

  2. #回滚莫队，链表#洛谷 6349 [PA2011] Kangaroos

    题目传送门 分析 首先区间 \([l,r]\) 与 \([L,R]\) 相交当且仅当 \(l\leq R\) 且 \(L\leq r\)(其实就是完全覆盖或者有一端点在区间中) 而且坐标范围太大了,如 ...

  3. Go 语言 Printf 函数和格式化动词详解

    Printf() 函数可以使用多种格式化动词对输出进行格式化.下面是可以与所有数据类型一起使用的一些通用格式化动词: 以下动词适用于所有数据类型: 动词 描述 %v 以默认格式打印值 %#v 以 Go ...

  4. Qt加Opencv实现 梯度矫正 功能

    废话: 有时候我们是从物品的斜上方拍摄的图片,看起来不直观,需要把视角拉正,这样的一个操作就叫做 梯度矫正,需要用到的技术是 Opencv 的 透视变换. 这个只是一个简单的演示demo,如果完善一下 ...

  5. openGauss Sqlines 使用指导

    openGauss Sqlines 使用指导 Sqlines 简介 Sqlines 是一款开源软件,支持多种数据库之间的 SQL 语句语法的的转换,openGauss 将此工具修改适配,新增了 ope ...

  6. 无监督多视角行人检测 Unsupervised Multi-view Pedestrian Detection

    无监督多视角行人检测 Unsupervised Multi-view Pedestrian Detection 论文url:https://arxiv.org/abs/2305.12457 论文简述 ...

  7. C#/.NET/.NET Core拾遗补漏合集（24年4月更新）

    前言 在这个快速发展的技术世界中,时常会有一些重要的知识点.信息或细节被忽略或遗漏.<C#/.NET/.NET Core拾遗补漏>专栏我们将探讨一些可能被忽略或遗漏的重要知识点.信息或细节 ...

  8. sql 语句系列(用魔法打败魔法)[八百章之第十章]

    前言 下面是一些常规的运维手段. 查询每个表的行数 SELECT a.name, a.object_id, b.rows, b.index_id FROM sys.tables AS a INNER ...

  9. 力扣178(MySQL)-分数排名（中等）

    题目: 表: Scores 编写 SQL 查询对分数进行排序.排名按以下规则计算: 分数应按从高到低排列.如果两个分数相等,那么两个分数的排名应该相同.在排名相同的分数后,排名数应该是下一个连续的整数 ...

  10. 智能logo免费体验｜网站Logo这样设计搜索排名跟着提升

    ​简介:一个好的网站logo,不仅让用户一眼知道网站品牌传递的信息,还能提高网站专业度和丰富度,增加SEO搜索排名.今天分享下如何设计一款实用的网站logo.阿里云智能logo设计,在线免费体验log ...