JavaScript简单的拖放层，兼容Firefox浏览器

发布时间：2018-10-31 17:07:11 所属栏目：活动来源：站长网

导读：Java Script简单的拖放层，兼容 Firefox 浏览器，鼠标按住蓝框可实现拖动。稍加修改，甚至不用修改就能用了，使用时候自己动手美化一些，还是较不错的，也适合个人学习JavaScript。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN h

　　JavaScript简单的拖放层，兼容Firefox浏览器，鼠标按住蓝框可实现拖动。稍加修改，甚至不用修改就能用了，使用时候自己动手美化一些，还是较不错的，也适合个人学习JavaScript。

　　示例：

<!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> <title>JS拖动代码</title> <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> <body> <div id="test" style="background-color:#0099CC;width:200px"onmouseover='Move_obj("test")'> <div> <ul> <li>文字内容</li> </ul> </div> <p>www.veryhuo.COM</p> <div> <ul> <li><a href="#">亲亲</a></li> </ul> </div> </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋江门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!