js 拖拽实现面向对象
1.js 支持面向对象编程，但只是基于面向对象，不使用类或者接口。
2.演变 工厂模式-------》构造函数模式----------》原型模式 工厂模式的缺点：
①函数内部new ,不太符合 new 函数这种写法 ----解决方法 构造函数
②资源浪费，工厂模式中函数中的方法，每一个新函数都会有自己的一个函数------解决方法 原型模式 3.构造函数的缺点：每个成员都无法得到复用，包括函数。
原型链的缺点：对象实例共享所有继承的属性和方法。 因此不适合单独使用，解决办法在子类构造函数内部调用超类的构造函数，就做到了每个实例都有自己的属性 5.最好的办法寄生组合继承：使用原型链继承共享的属性和方法，而通过借用构造函数继承实例的属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title> <script>
function Person(name,sex){
this.name = name;
this.sex= sex;
} Person.prototype.sayName = function(){
alert(this.name);
};
Person.prototype.saySex = function(){
alert(this.sex);
}; function Worker(name,sex,job){
Person.call(this,name,sex); //调用构造函数
this.job = job;
}
/*Worker.prototype = Person.prototype; //引用的写法，这样写改变子类的方法会把父类的方法也改变了*/ for(var attr in Person.prototype){ //这样写就不会了
Worker.prototype[attr] = Person.prototype[attr];
} Worker.prototype.sayJob = function(){
alert(this.job);
}; Worker.prototype.sayName = function(){
alert('123');
}; window.onload = function(){
var person1 = new Person('ww','女');
person1.sayName();
var instance = new Worker('leo','男','soft');
instance.sayName();
instance.sayJob();
}; </script> </head> <body>
</body>
</html>
// JavaScript Document
/*构造函数*/
function Drag(id){
this.disX = 0;
this.disY = 0;
this.oDiv = document.getElementsByTagName(id)[0];
var _this = this;
this.oDiv.onmousedown = function(ev){
_this.fnDown(ev);
return false;
};
}
Drag.prototype.fnDown = function(ev){
var oEvent = ev || event;
this.disX = oEvent.clientX - this.oDiv.offsetLeft;
this.disY = oEvent.clientY - this.oDiv.offsetTop;
var _this = this;
document.onmouseover = function(ev){
_this.fnMove(ev);
};
document.onmouseup = function(){
_this.fnUp(ev);
};
}
Drag.prototype.fnMove = function(ev){
var ev = ev || event;
this.oDiv.style.left = ev.clientX - this.disX+'px';
this.oDiv.style.top = ev.clientY - this.disY+'px';
}
Drag.prototype.fnUp = function(){
document.onmouseover = document.onmouseup = null;
}
// JavaScript Document
function LimateDrag(id){
Drag.call(this,id); //继承属性
}
//继承方法
for(var i in Drag.prototype){
LimateDrag.prototype[i] = Drag.prototype[i]
}
LimateDrag.prototype.fnMove = function(ev){
var ev = ev || 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';
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:100px;height:100px;background:red;position:absolute;left:0;top:0;}
</style>
<script src ='Drag.js'></script>
<script src ='LimateDrag.js'></script> <script>
window.onload = function(){
new LimateDrag('div');
};
</script>
</head> <body>
<div></div>
</body>
</html>
js 拖拽实现面向对象的更多相关文章
- 【转】C#.net拖拽实现获得文件路径
C#.net拖拽实现获得文件路径 作者Attilax , EMAIL:1466519819@qq.com 思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), ...
- 【WPF】一些拖拽实现方法的总结（Window，UserControl）
原文:[WPF]一些拖拽实现方法的总结(Window,UserControl) 原文地址 https://www.cnblogs.com/younShieh/p/10811456.html 前文 本文 ...
- HTML5元素拖拽实现示例
HTML5现在前端圈中,已然成为一个不那么新的技术词汇了,很多公司也把HTML5也当成了硬性的技能要求,但是很多前端恐怕都不了解HTML5的拖拽怎么实现吧. 看了下极客学院的视频,大概的了解了下思路. ...
- HTML5 元素拖拽实现 及 jquery.event.drag插件
如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
- C#.net拖拽实现获得文件路径
思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), 在DragDrop事件中对“信息”进行解析. 窗体的AllowDrop属性必须设置成tru ...
- Silverlight中的拖拽实现的图片上传
原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...
- selenium操作拖拽实现无效果的替代方案
如果碰到这种情况,无论你是直接通过draganddrop()还是分步执行clickandhold(),dragtoelement(),或通过by_offset位移都无法实现元素拖拽.只能物理模拟了 w ...
- C#winform拖拽实现获得文件路径
1.关键知识点说明: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等),在DragDrop事件中对“信息”进行解析.窗体的AllowDrop属性必须设置成true;且 ...
随机推荐
- Listary快速查找文件
快速查找文件 https://www.listary.com/
- SHELL用法九（awk练习）
1.SHELL编程Awk语句案例实战 Awk主要是用于对文本文件进行处理,通常是逐行处理,其语法参数格式为, AWK常用参数.变量.函数详解如下: awk 'pattern + {action}' f ...
- django Field选项中null和blank的区别
blank只是在填写表单的时候可以为空,而在数据库上存储的是一个空字符串:null是在数据库上表现NULL,而不是一个空字符串: 需要注意的是,日期型(DateField.TimeField.Date ...
- FFT与NTT专题
先不管旋转操作,考虑化简这个差异值 $$begin{aligned}sum_{i=1}^n(x_i-y_i-c)^2&=sum_{i=1}^n(x_i-y_i)^2+nc^2-2csum_{i ...
- 接口测试-chap5-使用正则表达式提取响应数据
1.导入相关库 import re 2.re.findall(r"前(.+?)后", 匹配源) 3.前:表示要匹配的文本左边的内容 4.后:表示要匹配的文本右边的内容 5.它的返回 ...
- python Dom
Dom(Document) 称为:文档对象模型,是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.DOM把网页和脚本以及其他的编程语言联系了起 ...
- response 画验证码
代码 import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.Bu ...
- Cobalt Strike学习笔记
Cobalt Strike 一款以metasploit为基础的GUI的框架式渗透测试工具,集成了端口转发.服务扫描,自动化溢出,多模式端口监听,win exe木马生成,win dll木马生成,java ...
- String.slice
String.slice(start, end)start从字符串的哪个index开始截取 默认值0 如果为负值,则从字符串的尾部向前倒推indexend到从字符串的哪个index结束截取 默认值st ...
- [转]win7 64位下完美安装64位oracle 11g
最近在网上搜如何在win764位的情况下安装64位的oracle,并且使用PLSQL Developer来管理oracle. 于是开始在oracle官网下载数据库,下载是一件很简单的事情,问题是在百度 ...