开发者社区> 爱六六> 正文

一步一步理解拖拽Drag(五)

简介: 拖拽三部曲:     1、this.dragInit.apply(this, arguments)    作用:初始化对象     2、 function setOptions                         作用:设置对象的属性或方法     3、与前面的相比好处是只要初始化一次。
+关注继续查看

拖拽三部曲:
     1、this.dragInit.apply(this, arguments)    作用:初始化对象
     2、 function setOptions                         作用:设置对象的属性或方法
     3、与前面的相比好处是只要初始化一次。  
     4、然后为函数对象设置属性即可。

View Code
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>一步一步理解拖拽Drag(五)</title>
5 <style type="text/css">
6 *{margin: 0px;padding: 0px;}
7 .moving{opacity: 0.6;filter: alpha(opacity=60); cursor:move}
8 .maindiv{width: 960px;border: 1px solid red;margin: 0 auto;}
9 .bigdiv{width: 960px;height: 1000px;overflow: hidden;position: relative;}
10 #mmdiv{width: 300px;height: 100px;left: 30px;top: 50px;border: 1px solid red;overflow: hidden;}
11 #mmdiv h3{width: 100%;height: 30px;line-height: 30px;background: #6666FF;cursor: move;}
12 #mmdiv h3 span{margin-left: 20px;}
13 </style>
14 <script type="text/javascript">
15 var base = {
16 getId: function (id) {
17 return document.getElementById(id);
18 },
19 addEvent: function (elem, type, fn) {
20 if (elem.addEventListener) {
21 elem.addEventListener(type, fn, false);
22 }
23 else if (elem.attachEvent) {
24 elem.attachEvent("on" + type, fn);
25 }
26 else {
27 elem["on" + type] = fn;
28 }
29 },
30 removeEvent: function (elem, type, fn) {
31 if (elem.removeEventListener) {
32 elem.removeEventListener(type, fn, false);
33 }
34 else if (elem.detachEvent) {
35 elem.detachEvent("on" + type, fn);
36 }
37 else {
38 elem["on" + type] = null;
39 }
40 },
41 unDefaultEvent: function (event) {
42 if (event && event.preventDefault) {
43 event.preventDefault();
44 }
45 else {
46 event.returnValue = false;
47 }
48 },
49 page: function (event) {
50 return { x: event.pageX || event.clientX + document.documentElement.scrollLeft, y: event.pageY || event.clientY + document.documentElement.scrollTop };
51 },
52 unSelection: function () {
53 if (document.selection && document.selection.empty) {
54 document.selection.empty();
55 }
56 else if (window.getSelection) {
57 window.getSelection().removeAllRanges();
58 }
59 }
60 };
61
62 function Drag() {
63 this.dragInit.apply(this, arguments);
64 }
65
66 Drag.prototype = {
67 dragInit: function (obj, options) {
68 this.obj = obj;
69 this.obj.style.position = "absolute";
70 this.setOptions(options);
71 this.handle = this.options.handle || obj;
72 this.bigcont = this.options.bigcont || document.documentElement;
73 this.moveCss = this.options.moveCss;
74 this.lock = this.options.lock;
75 this.lockX = this.options.lockX;
76 this.lockY = this.options.lockY;
77 var _this = this;
78 base.addEvent(this.handle, "mousedown", function (event) {
79 _this.startDrap(event);
80 });
81 },
82 setOptions: function (options) {
83 this.options = {
84 handle: "",
85 bigcont: "",
86 lock: false,
87 lockX: false,
88 lockY: false,
89 moveCss: ""
90 };
91
92 for (var p in options) {
93 this.options[p] = options[p];
94 }
95 },
96 startDrap: function (event) {
97 base.unDefaultEvent(event);
98 var _this = this;
99
100 this.disX = base.page(event).x - this.obj.offsetLeft;
101 this.disY = base.page(event).y - this.obj.offsetTop;
102
103 this.mousemoveHandle = function (event) {
104 _this.move(event);
105 };
106
107 this.mouseupHandle = function () {
108 _this.stopDrag();
109 };
110
111 base.addEvent(document, "mousemove", this.mousemoveHandle);
112
113 base.addEvent(document, "mouseup", this.mouseupHandle);
114
115 base.unSelection();
116
117 if (this.obj.setCapture) {
118 this.obj.setCapture(true);
119 }
120 },
121 move: function (event) {
122 base.unDefaultEvent(event);
123 this.obj.className = this.moveCss;
124
125 var x = base.page(event).x - this.disX;
126 var y = base.page(event).y - this.disY;
127
128 var range = {
129 minX: this.bigcont.scrollLeft,
130 minY: this.bigcont.scrollTop,
131 maxX: this.bigcont.scrollWidth - this.obj.offsetWidth,
132 maxY: this.bigcont.scrollHeight - this.obj.offsetHeight
133 };
134
135 x = Math.max(x, range.minX);
136 x = Math.min(x, range.maxX);
137 y = Math.max(y, range.minY);
138 y = Math.min(y, range.maxY);
139
140 if (true == this.lockX && true == this.lockY) {
141 }
142 else if (true == this.lockX) {
143 this.obj.style.left = x + "px";
144 }
145 else if (true == this.lockY) {
146
147 this.obj.style.top = y + "px";
148 }
149 else {
150 this.obj.style.left = x + "px";
151 this.obj.style.top = y + "px";
152 }
153
154 },
155 stopDrag: function () {
156 this.obj.className = "";
157 base.removeEvent(document, "mousemove", this.mousemoveHandle);
158 base.removeEvent(document, "mouseup", this.mouseupHandle);
159 if (this.obj.releaseCapture) {
160 this.obj.releaseCapture(true);
161 }
162 }
163 };
164
165 base.addEvent(window, "load", function () {
166 var tmp = base.getId("mmdiv");
167 var bigdiv = base.getId("bigdiv");
168 var tit = tmp.getElementsByTagName("h3")[0];
169 var b = new Drag(tmp, { "handle": tit, "bigcont": bigdiv, "lockX": false, "lockY": false });
170 var btn = document.getElementsByTagName("input");
171
172 btn[0].onclick = function () {
173
174 b.lockX = false;
175 b.lockY = false;
176 }
177
178 btn[1].onclick = function () {
179
180 b.lockX = true;
181 b.lockY = false;
182 }
183 btn[2].onclick = function () {
184
185 b.lockX = false;
186 b.lockY = true;
187 }
188 btn[3].onclick = function () {
189
190 b.lockX = true;
191 b.lockY = true;
192 }
193 });
194 </script>
195 </head>
196 <body>
197 <div class="maindiv">
198 <div>
199 <input type="button" value="范围拖动" />
200 <input type="button" value="水平拖动" />
201 <input type="button" value="垂直拖动" />
202 <input type="button" value="静止" />
203 </div>
204 <div id="bigdiv" class="bigdiv" style="background-color: Navy">
205 <div id="mmdiv">
206 <h3>
207 <span>标题</span>
208 </h3>
209 </div>
210 </div>
211 </div>
212 </body>
213 </html>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
18517 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
13373 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
12392 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24724 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14579 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
32672 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
21479 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
16957 0
+关注
爱六六
前端开发相关专家
164
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载