珠江路在线
首页
互联网思维
硬件中心
软件中心
游戏中心
源码之家
今日新鲜事
传奇
软件开发培训班
>>
编程开发
>> JavaScript
软件新闻
编程开发
创意设计
操作系统
软件下载
js之完全兼容ie与firefox的拖动层代码[测试好用]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>zhous html</title> </head> <body> 一共三个层,下面还有一个,把他拖上来 <div id="test" style=cursor:move;border:6px solid #000000;left:1px;top:2px;width:100px;height:100px;background-color:#F9F7ED;position:absolute;text-align:center><span>Magnolia Mag.nolia</span><input type="text" style="width:50px" maxlength="5"/></div> <div id="test1" style=cursor:move;border:6px solid #000000;left:1px;top:200px;width:150px;height:150px;background-color:#FF1A00;position:absolute;text-align:center><span>Mozilla Red</span> <input type="text" style="width:80px" maxlength="9"/></div> <div id="test3" style="border:3px solid #C3D9FF;text-align:center;left:700px;top:100px;width:150px;height:250px;background-color:#ffffff;position:absolute"><div id="test31" style="cursor:move;left:300px;top:200px;width:150px;height:30px;background-color:#C3D9FF;text-align:center;vertical-align:center;line-height:30px;font-weight:bold;color:#ffffff">小 纸 条</div>一共三个层,下面还有一个,把他拖上来 <textarea style="width:130px;height:150px;">有了拖动层,做局部拖动很简单</textarea> <input type="button" value="submit it"/></div> <div id="test4" style="border:3px solid #CDEB8B;text-align:center;left:480px;top:150px;width:150px;height:250px;background-color:#ffffff;position:absolute"><div id="test41" style="cursor:move;left:300px;top:200px;width:150px;height:30px;background-color:#CDEB8B;text-align:center;vertical-align:center;line-height:30px;font-weight:bold;color:#ffffff">小 纸 条</div>一共三个层,下面还有一个,把他拖上来 <textarea style="width:130px;height:150px;">顺便练习下颜色搭配</textarea> <input type="button" value="submit it"/></div> <div id="test2" style=cursor:move;border:6px solid #000000;left:200px;top:800px;width:100px;height:100px;background-color:#EEEEEE;position:absolute;text-align:center><span>Shiny silver</span> <input type="button" value="hit me"/></div> <script type="text/javascript" charset="utf-8"> var $=function(id){return document.getElementById(id)}; Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;} function divDrag(){ var A,B,$cn; var zIndex=1; this.dragStart=function(e){ e=e||window.event; if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return; var pos=this.$pos; $cn=this.parent||this; if(document.defaultView){ _top=document.defaultView.getComputedStyle($cn,null).getPropertyValue("top"); _left=document.defaultView.getComputedStyle($cn,null).getPropertyValue("left");} else{ if($cn.currentStyle){_top=$cn.currentStyle["top"];_left=$cn.currentStyle["left"];}} pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left); pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top); if(!!A){ if(document.removeEventListener){ document.removeEventListener("mousemove",A,false); document.removeEventListener("mouseup",B,false);} else{ document.detachEvent("onmousemove",A); document.detachEvent("onmouseup",B);}} A=this.dragMove.create(this); B=this.dragEnd.create(this); if(document.addEventListener){ document.addEventListener("mousemove",A,false); document.addEventListener("mouseup",B,false);} else{ document.attachEvent("onmousemove",A); document.attachEvent("onmouseup",B);} $cn.style.zIndex=(++zIndex); this.stop(e); } this.dragMove=function(e){ e=e||window.event; var pos=this.$pos; $cn=this.parent||this; $cn.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+px; $cn.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+px; this.stop(e);} this.dragEnd=function(e){ var pos=this.$pos; e=e||window.event; if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return; $cn=this.parent||this; if(!!(this.parent)){this.style.backgroundColor=pos.color} if(document.removeEventListener){ document.removeEventListener("mousemove",A,false); document.removeEventListener("mouseup",B,false);} else{ document.detachEvent("onmousemove",A); document.detachEvent("onmouseup",B);} A=null; B=null; $cn.style.zIndex=(++zIndex); this.stop(e); } this.shiftColor=function(){ this.style.backgroundColor="#EEEEEE"; } this.position=function (e){ var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft;} return {x:l,y:t,ox:0,oy:0,color:null} } this.stop=function(e){ if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;} if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;} } this.stop1=function(e){ e=e||window.event; if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;} } this.create=function(bind){ var B=this; var A=bind; return function(e){return B.apply(A,[e]);} } this.dragStart.create=this.create; this.dragMove.create=this.create; this.dragEnd.create=this.create; this.shiftColor.create=this.create; this.initialize=function(){ for(var A=0,B=arguments.length;A<B;A++){ C=arguments[A]; if(!(C.push)){C=[C];} $C=(typeof(C[0])==object)?C[0]:(typeof(C[0])==string?$(C[0]):null); if(!$C)continue; $C.$pos=this.position($C); $C.dragMove=this.dragMove; $C.dragEnd=this.dragEnd; $C.stop=this.stop; if(!!C[1]){$C.parent=C[1];$C.$pos.color=$C.style.backgroundColor;} if($C.addEventListener){ $C.addEventListener("mousedown",this.dragStart.create($C),false); if(!!C[1]){$C.addEventListener("mousedown",this.shiftColor.create($C),false);}} else{$C.attachEvent("onmousedown",this.dragStart.create($C)); if(!!C[1]){$C.attachEvent("onmousedown",this.shiftColor.create($C));}} } } this.initialize.apply(this,arguments); } //生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,arr[0]表示拖动层,arr[1]表示整体) new divDrag( [test], [$(test31),$(test3)], $(test1) ,$(test2) ,[$(test41),$(test4)]); </script> </body> </html>
技术文章快速查找
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
javascript offsetX与layerX区别
Javascript继承机制的设计思想分享
基于jQuery的倒计时实现代码
一个简单的javascript类定义例子
jquery浏览器滚动加载技术实现方案
IE8 下的Js错误HTML Parsing Error...
toggle一个div显示或隐藏且可扩展成自定义下拉框
相关下载
在线教程导航
软件应用
·
Windows8
·
Windows7
·
Word
·
Excel
·
PPT
·
WPS
Web开发
·
ASP
·
JavaScript
·
DIV+CSS
·
JSP
·
VbScript
·
XML
·
PHP
开发语言
·
VB
·
VC
·
ASP.NET
·
Java
·
C++
·
Delphi
数据库开发
·
MySQL
·
MsSQL
·
Access
·
Oracle
·
DB2
手机系统
·
Android
·
iOS
·
WindowsPhone
网站设计
·
Flash
·
Dreamweaver
·
Fireworks
平面设计
·
Photoshop
·
CorelDraw
·
AutoCAD
·
3DsMAX
·
Illustrator
网络技术
·
网站运营
·
网络安全
·
网络搭建
工具：
成语大全
邮编区号
全国地图
南京二手车
免费电影
汉字换拼音
繁体字转换
二维码
| 站长工具：
收录/反向链接
ALEXA排名
关键词排名
WHOIS
教程：
PPT
Excel
Word
Dreamweaver
Photoshop
|
ASP
PHP
|
ASP.NET
Java
|
SQL
MySQL
热门论坛：
游戏
美食
传奇
冒险岛
魔域
天龙八部
DNF
征途
游戏：
传奇
天龙八部
魔域
奇迹
DNF公益服
传奇世界
神途
梦幻西游
天龙八部
魔域
DNF
冒险岛
奇迹
魔域
传奇
单职业
天龙
魔域
梦幻西游
DNF
天龙八部
关于我们
广告报价
|
版权声明
：本网站归南京网爵数码科技有限责任公司版权所有。
苏ICP备05016148号-1
公安备案号 32010202010177
