第一种原生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
|
window.onload=function ()
{
var
oDrag=document.getElementById(
'drag'
);
oDrag.onmousedown=function (ev)
{
var
oEvent=ev||
event
;
var
disX=oEvent.clientX-oDrag.offsetLeft;
//x坐标
var
disY=oEvent.clientY-oDrag.offsetTop;
//y坐标
document.onmousemove=function (ev)
{
var
oEvent=ev||
event
;
var
l=oEvent.clientX-disX;
//移动x坐标位置
var
t=oEvent.clientY-disY;
//移动y坐标位置
//限制范围
if
(l<0)
{
l=0;
}
else
if
(l>document.documentElement.clientWidth-oDrag.offsetWidth)
{
l=document.documentElement.clientWidth-oDrag.offsetWidth;
}
if
(t<0)
{
t=0;
}
else
if
(t>document.documentElement.clientHeight-oDrag.offsetHeight)
{
t=document.documentElement.clientHeight-oDrag.offsetHeight;
}
oDrag.style.left=l+
'px'
;
oDrag.style.top=t+
'px'
;
};
document.onmouseup=function ()
{
document.onmousemove=
null
;
document.onmouseup=
null
;
};
};
};
|
第二种jQuery写法
|
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
|
$(function(){
$(
'#drag'
).mousedown(function (){
var
patch=parseInt($(
this
).css(
"height"
))/2;
/* 也可以写成var patch=parseInt($(this).css("width"))/2*/
$(document).mousemove(function (
event
){
var
ox=
event
.clientX;
var
oy=
event
.clientY;
var
t=oy-patch;
var
l=ox-patch;
var
w=$(window).width()-$(
'#drag'
).width();
var
h=$(window).height()-$(
'#drag'
).height();
if
(t<0){
t=0;
}
else
if
(t>h){
t=h;
}
if
(l<0){
l=0;
}
else
if
(l>w){
l=w;
}
$(
'.drag'
).css({top:t,left:l})
})
});
$(document).mouseup(function (){
$(
this
).unbind(
"mousemove"
);
});
})
|
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
