-
Notifications
You must be signed in to change notification settings - Fork 496
/
Copy path3、模块化开发拖拽效果-2带图片的盒子优化.html
126 lines (116 loc) · 3.83 KB
/
3、模块化开发拖拽效果-2带图片的盒子优化.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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖拽的图片</title>
<style>
div{width: 100px;height: 100px;position: absolute;background: orange;top:0;left: 0;cursor: move;}
#div2{ top:100px;left: 160px;background: blueviolet;}
#div3{ top:30px;left: 360px;background: chocolate;}
</style>
</head>
<body>
<div id="div1"><img src="logo.jpg" alt="logo"/></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
<script src="event3.js"></script>
<script>
var eles=document.getElementsByTagName("div");
for(var i=0;i<eles.length;i++){
on(eles[i],"mousedown",down)
}
var zIndex=1;
function down(e){
clearTimeout(this.flytimer);
clearTimeout(this.droptimer);
this.x=this.offsetLeft;
this.y=this.offsetTop;
this.mouseX= e.pageX;
this.mouseY= e.pageY;
if(this.setCapture){
this.setCapture();
on(this,"mousemove",move);
on(this,"mouseup",up);
}else{
this._move=bindThis(this,move);
this._up=bindThis(this,up);
on(document,"mousemove",this._move);
on(document,"mouseup",this._up);
}
this.style.zIndex=++zIndex;//解决图片覆盖的；
e.preventDefault();//阻止默认行为，解决盒子因为加了图片，站住鼠标的BUG；
}
function move(e){
this.style.left=this.x+ (e.pageX-this.mouseX)+"px";
this.style.top=this.y+ (e.pageY-this.mouseY)+"px";
/*加动画效果的代码*/
if(!this.prevX){
//记录第一次/上一次move事件触发的时候鼠标X轴位置;
this.prevX= e.clientX;
}else{
this.speed= e.clientX-this.prevX;//速度=这次位置-上次位置；
this.prevX= e.clientX;//改变this.prevX；记录本次的位置
//两次move事件之间的事件间大体是一样的；
// 速度=单位时间的距离;
}
/*动画代码结束*/
}
function up(e){
if(this.releaseCapture){
this.releaseCapture();
off(this,"mousemove",move);
off(this,"mouseup",up);
}else{
off(document,"mousemove",this._move);
off(document,"mouseup",this._up);
}
fly.call(this);
drop.call(this);
}
/*左右反弹*/
function fly(){
clearTimeout(this.flytimer);
var maxRight=(document.documentElement.clientWidth||document.body.clientWidth)-this.offsetWidth;
this.speed*=0.93;
if(this.offsetLeft+this.speed>=maxRight){
this.style.left=maxRight+"px";
this.speed*=-1;
}else if(this.offsetLeft+this.speed<=0){
this.style.left=0;
this.speed*=-1;
}else{
this.style.left=this.offsetLeft+this.speed+"px";
}
if(Math.abs(this.speed)>=0.5){/*定时器停止的条件*/
this.flytimer=window.setTimeout(bindThis(this,arguments.callee),30);
}
}
/*自由落体*/
var g=9.8;
var flag=0;
function drop(){
clearTimeout(this.droptimer);
var maxBottom=(document.documentElement.clientHeight||document.body.clientHeight)-this.offsetHeight;
if(!this.dropSpeed){
this.dropSpeed=g;
}else{
this.dropSpeed+=g;
}
/*下面是摩擦系数*/
this.dropSpeed*=0.93;
/*下面是边界判断*/
if(this.offsetTop+this.dropSpeed>=maxBottom){
this.style.top=maxBottom+"px";
this.dropSpeed*=-1;
flag++;
}else{
this.style.top=this.offsetTop+this.dropSpeed+"px";
flag=0;
}
if(flag<2){
this.droptimer=window.setTimeout(bindThis(this,arguments.callee),30);
}
}
</script>