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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title></title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div id="c" style="margin:100px;border:2px solid #f00;position:relative;width:800px;height:600px;">
<div id="a" style="border:1px solid #000; height:200px;width:300px;position:absolute;left:0;top:0;">
<p id="b" style="background:#ccc;height:20px;line-height:20px;">a</p>
b
</div>
</div>
<div style="height:1500px;"></div>
<script>
function ztbDrag(bar,target){
/*
* ztbDrag(鼠标/手指操作处，作用目标)
* ztbDrag(鼠标/手指操作处，作用目标，移动范围容器)
* ztbDrag(鼠标/手指操作处，作用目标，回调函数)
* ztbDrag(鼠标/手指操作处，作用目标，移动范围容器，回调函数)
* */
bar=ztbDrag.tools.getEle(bar), target=ztbDrag.tools.getEle(target);
var container, callback;
if(arguments.length===3){
var arg3=arguments[2];
typeof arg3==='function'?(callback=arg3):(container=arg3);
}else if(arguments.length===4) container=arguments[2], callback=arguments[3];
var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false };
var _left=ztbDrag.tools.getCss(target, 'left'), _top=ztbDrag.tools.getCss(target, 'top');
_left !== 'auto' && (params.left = _left);
_top !== 'auto' && (params.top = _top);
var iftouch='ontouchstart' in document, events={ start:'mousedown', ing:'mousemove', end:'mouseup' };
iftouch && (events={ start:'touchstart', ing:'touchmove', end:'touchend' });
var _ll,_tt;
if(container){
container=ztbDrag.tools.getEle(container),
_ll=container.clientWidth-target.offsetWidth,
_tt=container.clientHeight-target.offsetHeight;
}
var start=function(event){
params.flag = true;
if(!event){
event = window.event;
bar.onselectstart = function(){ return false; };
}
event.preventDefault();
var e = iftouch? event.touches[0] : event;
params.currentX = e.clientX;
params.currentY = e.clientY;
},
end=function(){
params.flag = false;
var left=ztbDrag.tools.getCss(target, 'left'), top=ztbDrag.tools.getCss(target, 'top');
left !== 'auto' && (params.left = left);
top !== 'auto' && (params.top = top);
},
ing=function(event){
event= event||window.event;
event.preventDefault();
var e = iftouch? event.touches[0] : event;
if(params.flag){
var disX = e.clientX - params.currentX, disY = e.clientY - params.currentY;
var nowLeft=parseInt(params.left) + disX, nowTop=parseInt(params.top) + disY;
if(container){
nowLeft<0 && (nowLeft=0);
nowTop<0 && (nowTop=0);
nowLeft>_ll && (nowLeft=_ll);
nowTop>_tt && (nowTop=_tt);
}
target.style.left = nowLeft + 'px';
target.style.top = nowTop+ 'px';
callback && callback(disX, disY, nowLeft, nowTop);
}
},
on=function(){
bar.addEventListener(events.start,start,false),
document.addEventListener(events.ing,ing,false),
document.addEventListener(events.end,end,false),
bar.style.cursor='move', bar.style.MozUserSelect='none', bar.style.WebkitUserSelect='none', bar.style.OUserSelect='none', bar.style.userSelect='none';
return returnO;
},
off=function(){
bar.removeEventListener(events.start,start,false),
document.removeEventListener(events.ing,ing,false),
document.removeEventListener(events.end,end,false),
bar.style.cursor='', bar.style.MozUserSelect='', bar.style.WebkitUserSelect='', bar.style.OUserSelect='', bar.style.userSelect='';
return returnO;
},
returnO= { on:on, off:off };
returnO.on();
return returnO;
}
ztbDrag.tools={
getCss:function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; },
getEle:function(arg){ return typeof arg==='string'?document.getElementById(arg):arg; }
};
//ztbDrag('b','a');
ztbDrag(document.getElementById('b'),'a','c',function(disx,disy,left,top){
console.log(disx,disy,left,top);
});
</script>
</body>
</html>
|