本文最后更新于：2023年3月30日 下午
1.用面向对象做好基础工作；
2.但是传入的参数会因为个数不同而出现报错情况；
3.解决参数问题将参数写到一个json里是参数变为一个就不会出现这个问题了；
4.写出默认配置参数，当参数中没有这个时就调用默认配置；
5.用默认配置去继承当前配置即可
例子：
html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <!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 type="text/css">
*{ margin: 0;padding:0;list-style: none}
#div1{ width: 100px;height: 100px;background: pink;position: absolute;}
#div2{ width: 100px;height: 100px;background: yellow;position: absolute;left:100px;}
#div3{ width: 100px;height: 100px;background: blue;position: absolute;left:200px;}
#div4{ width: 100px;height: 100px;background: purple;position: absolute;left:300px;}
</style>
<script type="text/javascript" src="dragModule.js"></script>
<script type="text/javascript">
window.onload = function() {
var div1 = new Drag('div1');
div1.init();
var div2 = new confineDrag('div2');
div2.init({
down: function() {
document.title = 'max';
}
});
var div3 = new confineDrag('div3');
div3.init({
down:function(){
document.title = 'max';
},
up:function(){
document.title = 'char';
}
});
var div4 = new confineDrag('div4');
div4.init({
up:function(){
document.title = 'byebye';
}
});
}
</script>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
|
js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| ;function Drag(id) {
this.id = id;
}
function extend(obj1, obj2) {
for(var attr in obj2) {
obj1[attr] = obj2[attr];
}
}
Drag.prototype.init = function(opt) {
var _this = this;
this.obj = document.getElementById(_this.id);
this.disX = 0;
this.disY = 0;
this.settings = {
down: function() {},
up: function() {}
}
extend(this.settings, opt);
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
this.scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
this.obj.onmousedown = function(ev) {
_this.settings.down();
var ev = ev || event || window.event;
_this.fnDown(ev);
document.onmousemove = function(ev) {
var ev = ev || event || window.event;
_this.fnMove(ev);
}
document.onmouseup = function() {
_this.settings.up();
_this.fnUp();
}
}
}
Drag.prototype.fnDown = function(ev) {
this.disX = ev.clientX - this.obj.offsetLeft + this.scrollLeft;
this.disY = ev.clientY - this.obj.offsetTop + this.scrollTop;
}
Drag.prototype.fnMove = function(ev) {
this.obj.style.left = ev.clientX - this.disX + 'px';
this.obj.style.top = ev.clientY - this.disY + 'px';
}
Drag.prototype.fnUp = function(ev){
document.onmousemove = null;
document.onmouseup = null;
return false;
}
function confineDrag(id) {
Drag.call(this, id);
}
for (var attr in Drag.prototype) {
confineDrag.prototype[attr] = Drag.prototype[attr];
}
confineDrag.prototype.fnMove = function(ev) {
this.L = ev.clientX - this.disX;
this.T = ev.clientY - this.disY;
if (this.L < 0) {
this.L = 0;
} else if (this.L > document.documentElement.clientWidth - this.obj.offsetWidth) {
this.L = document.documentElement.clientWidth - this.obj.offsetWidth;
}
if (this.T < 0) {
this.T = 0;
} else if (this.T > document.documentElement.clientHeight - this.obj.offsetHeight) {
this.T = document.documentElement.clientHeight - this.obj.offsetHeight;
}
this.obj.style.left = this.L + 'px';
this.obj.style.top = this.T + 'px';
}
|