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

思路:先用面过过程的方法将要实现的效果实现出来,然后按照以下步骤将拆分成面向对象  

  //面向过程的程序改写成面向对象程序不能有函数嵌套
  //将window.onload初始化整个程序改为构造函数初始化整个对象
  //将面向过程中的变量改为属性
  //将面向过程中的函数改为方法

index.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>面向对象拖拽</title>
  <style>
    #div1{width: 200px;height: 200px;background: red;position: absolute;}
    #div2{width: 200px;height: 200px;background: green;position: absolute;}
  </style>
  <script src="drag.js"></script>
  <script src="limitDrag.js"></script>
  <script>
    window.onload = function(){
      new Drag("div1");
      new limitDrag("div2");
    }
  </script>
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>
</html>

Drag.js文件

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

Drag.prototype.fnDown = function(e){
  var _this = this;
  var e = e || window.event;
  this.disX = e.clientX-this.oDiv.offsetLeft;
  this.disY = e.clientY-this.oDiv.offsetTop;
  document.onmousemove = function(e){
    _this.fnMove(e);
  };
  document.onmouseup = function(){
    _this.fnUp();
  };
}

Drag.prototype.fnMove = function(e){
  var e = e || window.event;
  this.oDiv.style.left = e.clientX-this.disX + ‘px‘;
  this.oDiv.style.top = e.clientY-this.disY + ‘px‘;
}

Drag.prototype.fnUp = function(e){
  document.onmousemove = null;
  document.onmouseup = null;
}

limitDrag.js文件,用来实现拖拽继承

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

//新继承出来的拖拽可以实现自己的单独的功能
limitDrag.prototype.fnMove = function(e){
  var e = e || window.event;
  var l = e.clientX-this.disX;
  var t = e.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-09-29 17:49:12

用面向对象写一个拖拽,并实现继承的相关文章

利用面向对象写一个计算器

本文参考了程杰的<大话设计模式>,使用C#语言利用面向对象的模式来写一个计算器. 如果是我本人来写计算器,也就加减乘除的话,估计我会全部写进控制台里面,写4个if语句出来......或者我会利用switch,但是这样的效果都不好,有更好的方法,就是如下所示的代码啦: 先定义一个Operation类,主要实现运算框架: class Operation { public double Number1 { get; set;} public double Number2 { get; set; }

Java小练习之利用面向对象写一个简单的登录系统

import java.util.Scanner; /** * 采用面向对象的方式 写一个登录系统 * @author Administrator * */ //用户信息 class UserInfo{ public static String[] user = new String[10]; public static String[] passwd = new String[10]; public UserInfo() { this.user[0] = "test"; this.p

分享html5的一个拖拽手法

就是这样的效果:拖拽之前 之后: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> html5 drag and drop</title> <style> *[draggable=true] { -moz-user-select:none; -khtml-user-drag: e

63.实现一个拖拽排序

//为了方便借助vue和jquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C

面向对象写法的拖拽

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{ width:100px; height:100px; background:red; po

HTML5:一个拖拽网页元素的例子

关键字:HTML5, Drag&Drop, JavaScript, CSS 运行环境:Chrome <!DOCTYPE html> <html> <head> <title>example</title> <style type="text/css"> .main-area { margin-left: 10%; margin-right: 10%; min-width: 600px; } ul { pad

【十六】使用面向对象 写一个个人主页

page.inc.php 1 <?php 2 class page{ 3 public $content; 4 public $title="tla consulting pty ltd"; 5 public $keywords="tla consulting,three latter abbreviation,some of my best friends are search engines"; 6 public $buttons=array("

鼠标拖拽元素以及继承原生代码

实现页面上两个DOM元素的操作,通过继承的方式 class Drag{ constructor(ele){ this.ele = ele; this.m = this.move.bind(this); this.u = this.up.bind(this); this.addEvent(); } addEvent(){ this.ele.addEventListener("mousedown",this.down.bind(this)) } down(eve){ var e = eve

拖拽效果的实现原理分析2

拖拽效果的实现原理分析2 上文对html5支持的浏览器的拖拽效果进行了分析,本文不采用任何库,来分析下拖拽的过程 先想想我们平时拖拽是怎么操作的,大致可以分为几下几个步骤: 鼠标按下,鼠标移动,拖拽,被拖动的物件跟着走 鼠标松开,物件停止,无拖动了 计算距离,拖拽的距离(鼠标移动) 对应在事件上就是 onmousedown,onmousemove ,开始拖拽 onmouseup ,停止拖拽 计算相对的拖拽距离 下面我们按照这种思路,写一个拖拽效果,假设我们拖动标题,这块的内容就跟着走. 首先我们