以下为程序代码:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
><
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>

<
script
language
="JavaScript"
type
="text/javascript"
>
...
var x,y
var drag_=false
var D=new Function('obj','return document.getElementById(obj);')
var IE=new Function('','if(navigator.appName.indexOf("Explorer")>=0)return 1;if(navigator.appName.indexOf("Netscape")>=0)return 2') 
function Move_obj(obj)...{//1 
D(obj).onmousedown=function(e)...{drag_=true//4 
with(this)...{style.position="absolute";temp1=offsetLeft;temp2=offsetTop;//5 
if(IE()==1)...{x=event.clientX;y=event.clientY//6 
document.onmousemove=function(e)...{//7
if(drag_==false)return false 
with(this)...{style.left=temp1+event.clientX-x+"px";style.top=temp2+event.clientY-y+"px"}
}//7
}//6 
if(IE()==2)...{x=e.pageX;y=e.pageY;//8 
document.onmousemove=function(e)...{//9
if(drag_==false)return false 
with(this)...{style.left=temp1+e.pageX-x+"px";style.top=temp2+e.pageY-y+"px"}
}//9
}//8
}//5
document.onmouseup=new Function("drag_=false")
}//4
}//1
</
script
>
</
head
>
<
body
>
<
div
id
="test"
style
="background-color:#0099CC;width:200px"
onmouseover
='Move_obj("test")'
>
这个是可以拖动的层
<
a
href
="http://www.the9web.com"
>
第九网络
</
a
></
div
>
</
body
>
</
html
>
本文介绍了一种使用JavaScript实现HTML元素拖拽功能的方法。通过监听鼠标事件并根据浏览器类型调整坐标,使得指定的HTML元素可以被用户拖动到页面上的任意位置。
1003





