1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
3
<
head
>
4
<
title
>
代码非常简洁且兼容多浏览器的拖动层
</
title
>
5
</
head
>
6
<
body
>
7
<
div
id
="f"
style
="position: absolute; width: 500px; height: 350px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;"
>
8
<
div
id
="title"
style
="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; padding-top: 5px; padding-left: 10px;"
>
这里是层标题websjy.com
</
div
>
9
</
div
>
10
11
<
script
type
="text/javascript"
>
12
var
posX;
13
var
posY;
14
fdiv
=
document.getElementById(
"
f
"
);
15
document.getElementById(
"
title
"
).onmousedown
=
function
(e)
16
{
17
if
(
!
e) e
=
window.event;
18
posX
=
e.clientX
-
parseInt(fdiv.style.left);
19
posY
=
e.clientY
-
parseInt(fdiv.style.top);
20
document.onmousemove
=
mousemove;
21
}
22
document.onmouseup
=
function
()
23
{
24
document.onmousemove
=
null
;
25
}
26
function
mousemove(ev)
27
{
28
if
(ev
==
null
) ev
=
window.event;
29
fdiv.style.left
=
(ev.clientX
-
posX)
+
"
px
"
;
30
fdiv.style.top
=
ev.clientY
-
posY
+
"
px
"
;
31
}
32
</
script
>
33
</
body
>
34
</
html
>
查看演示效果
转载于:https://www.cnblogs.com/websjy/archive/2011/01/02/1924169.html
相关资源：JAVA上百实例源码以及开源项目
