js源码--简单的div拖动

<
html
>



<
head
>





<
meta http
-
equiv
=
"
Content-Type
"
content
=
"
text/html; charset=gb2312
"
></
head
>



<
BODY style
=
"
margin:0;padding:0;
"
>



<
div id
=
"
dMsgBody
"
style
=
"
border:1px solid;position:absolute
"
>



<
div id
=
"
dTitle
"
style
=
"
background-color:#CCCCCC
"
>
这是标题，拖动这里可以实现拖动效果
</
div
>



<
div id
=
"
dTxtBody
"
>
这是正文，拖动这里不可以实现拖协效果
</
div
>



</
div
>



</
body
>



<
script language
=
"
javascript
"
>



var
object
;



window.onload
=
startUp(document.getElementById(
"
dMsgBody
"
));





function startUp(obj)......
...
{



obj.onmousemove
=
mousemove;



obj.onmousedown
=
mousedown;



obj.onmouseup
=
mouseup;



}







function mousemove()......
...
{





if
(
object
!=
null
)......
...
{



object
.style.pixelTop
=

event
.clientY
-
object.objY;



object
.style.pixelLeft
=

event
.clientX
-
object.objX;



}



}







function mousedown(
event
,obj)......
...
{



obj
=
obj
||
this
;



event
=
event
||
window.
event
;



obj.setCapture();



object
=
obj;



//
objX = event.offsetX;



//
objY = event.offsetY;



obj.

objX
=

event
.clientX
-
obj.style.pixelLeft;



obj.

objY
=

event
.clientY
-
obj.style.pixelTop;



//
alert(obj.offsetTop+" "+obj.style.pixelTop) offset是和body标签的距离，所以会有空隙才能等效，所以在body上加了css



}







function mouseup()......
...
{





if
(
object
!=
null
)......
...
{



object
.releaseCapture();



object
=
null



}



}



</
script
>



</
html
>

自己写了个，这个应该是比较简单通用的