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
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset= "utf-8">
<
title
></
title
>
<!--<script src="jquery-1.9.1.min.js"></script>-->
<
style
>
#drag{
background: red;
width: 200px;
height: 200px;
cursor: move;
position: fixed;
top: 0;
left: 0;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"drag"
></
div
>
<
script
src
=
"scripts/test.js"
></
script
>
</
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
|
window.onload = function(){
var drag = new Drag("drag");
drag.init();
}
//获取浏览器窗口宽度
function getInner(){
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
return {width:pageWidth,height:pageHeight};
}
//构造函数
function Drag(id){
this.obj = document.getElementById("drag");
this.disx = 0;
this.disy = 0;
}
Drag.prototype.init = function(){
//this 指针
var me = this;
this.obj.||event;
me.onmouseDown(e);
//阻止默认事件
return false;
}
}
Drag.prototype.onmouseDown = function(e){
//this指针
var me = this;
this.disx = e.clientX - this.obj.offsetLeft;
this.disy = e.clientY - this.obj.offsetTop;
document.||event;
me.onmouseMove(e);
}
document.onmouseup = function(){
me.mouseUp();
}
}
Drag.prototype.onmouseMove = function (e){
//this指针
var lf = e.clientX - this.disx;
var tp = e.clientY - this.disy;
if(lf < 0){ //防止拖曳层超出左边界
lf = 0;
}else if(lf > getInner().width - this.obj.offsetWidth){
lf = getInner().width - this.obj.offsetWidth;//防止拖曳层超出右边界
}
if(tp < 0){
tp = 0;//防止拖曳层超出上边界
}else if(tp > getInner().height - this.obj.offsetHeight){
tp = getInner().height - this.obj.offsetHeight;//防止拖曳层超出下边界
}
this.obj.style.left = lf + 'px';
this.obj.style.top = tp + 'px';
};
Drag.prototype.mouseUp = function (){
document.onmousemove = null;
document.onmouseup = null;
};
|
