完全兼容ie与firefox的拖动层

最新推荐文章于 2024-07-12 14:12:22 发布
最新推荐文章于 2024-07-12 14:12:22 发布
阅读量803 收藏
点赞数
分类专栏： Javascript HTML 文章标签： firefox ie function button border null
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=GBK">
  5. <title>zhou's html</title>
  6. </head>
  7. <body>
  8.                                                 一共三个层,下面还有一个,把他拖上来
  9. <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>
  11. <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><br/><input type="text" style="width:80px" maxlength="9"/></div>
  13. <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>一共三个层,下面还有一个,把他拖上来<br/><textarea style="width:130px;height:150px;">有了拖动层,做局部拖动很简单</textarea><br/><input type="button" value="submit it"/></div>
  15. <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>一共三个层,下面还有一个,把他拖上来<br/><textarea style="width:130px;height:150px;">顺便练习下颜色搭配</textarea><br/><input type="button" value="submit it"/></div>
  17. <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><br/><input type="button" value="hit me"/></div>
  19. <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  20. <script type="text/javascript" charset="utf-8">
  21. var $=function(id){return document.getElementById(id)};
  22. Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
  23. function divDrag(){
  24.         var A,B,$cn;
  25.         var zIndex=1;
  26.         this.dragStart=function(e){
  27.                 ee=e||window.event;
  28.                 if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;
  29.                 var pos=this.$pos;
  30.                 $cn=this.parent||this;
  31.                 if(document.defaultView){
  32.                     _top=document.defaultView.getComputedStyle($cn,null).getPropertyValue("top");
  33.                     _left=document.defaultView.getComputedStyle($cn,null).getPropertyValue("left");}
  34.                 else{
  35.                     if($cn.currentStyle){_top=$cn.currentStyle["top"];_left=$cn.currentStyle["left"];}}
  36.                 pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
  37.                 pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
  38.                 if(!!A){
  39.                      if(document.removeEventListener){
  40.                         document.removeEventListener("mousemove",A,false);
  41.                         document.removeEventListener("mouseup",B,false);}
  42.                     else{
  43.                         document.detachEvent("onmousemove",A);
  44.                         document.detachEvent("onmouseup",B);}}
  45.                 A=this.dragMove.create(this);
  46.                 B=this.dragEnd.create(this);
  47.                 if(document.addEventListener){
  48.                     document.addEventListener("mousemove",A,false);
  49.                     document.addEventListener("mouseup",B,false);}
  50.                 else{
  51.                     document.attachEvent("onmousemove",A);
  52.                     document.attachEvent("onmouseup",B);}
  53.                 $cn.style.zIndex=(++zIndex);
  54.                 this.stop(e);
  55.         }
  56.         this.dragMove=function(e){
  57.                 ee=e||window.event;
  58.                 var pos=this.$pos;
  59.                 $cn=this.parent||this;
  60.                 $cn.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
  61.                 $cn.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
  62.                 this.stop(e);}
  63.         this.dragEnd=function(e){
  64.                 var pos=this.$pos;              
  65.                 ee=e||window.event;
  66.                 if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;
  67.                 $cn=this.parent||this;
  68.                 if(!!(this.parent)){this.style.backgroundColor=pos.color}
  69.                 if(document.removeEventListener){
  70.                         document.removeEventListener("mousemove",A,false);
  71.                         document.removeEventListener("mouseup",B,false);}
  72.                 else{
  73.                         document.detachEvent("onmousemove",A);
  74.                         document.detachEvent("onmouseup",B);}
  75.                 A=null;
  76.                 B=null;
  77.                 $cn.style.zIndex=(++zIndex);
  78.                 this.stop(e);
  79.         }
  80.         this.shiftColor=function(){
  81.             this.style.backgroundColor="#EEEEEE";   
  82.         }
  83.         this.position=function (e){ 
  84.                 var t=e.offsetTop;
  85.                 var l=e.offsetLeft;
  86.                 while(ee=e.offsetParent){ 
  87.                                 t+=e.offsetTop; 
  88.                                 l+=e.offsetLeft;}
  89.                 return {x:l,y:t,ox:0,oy:0,color:null}
  90.         }
  91.         this.stop=function(e){
  92.                 if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
  93.                 if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;}
  94.         }
  95.         this.stop1=function(e){
  96.             ee=e||window.event;
  97.             if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
  98.         }
  99.         this.create=function(bind){
  100.                 var B=this;
  101.                 var A=bind;
  102.                 return function(e){return B.apply(A,[e]);}
  103.         }
  104.         thisthis.dragStart.create=this.create;
  105.         thisthis.dragMove.create=this.create;
  106.         thisthis.dragEnd.create=this.create;
  107.         thisthis.shiftColor.create=this.create;
  108.         this.initialize=function(){
  109.                 for(var A=0,B=arguments.length;A<B;A++){
  110.                         C=arguments[A];
  111.                         if(!(C.push)){C=[C];}
  112.                         $C=(typeof(C[0])=='object')?C[0]:(typeof(C[0])=='string'?$(C[0]):null);
  113.                         if(!$C)continue;
  114.                         $C.$pos=this.position($C);
  115.                         $C.dragMove=this.dragMove;
  116.                         $C.dragEnd=this.dragEnd;
  117.                         $C.stop=this.stop;
  118.                         if(!!C[1]){$CC.parent=C[1];$C.$pos.color=$C.style.backgroundColor;}
  119.                         if($C.addEventListener){
  120.                             $C.addEventListener("mousedown",this.dragStart.create($C),false);
  121.                             if(!!C[1]){$C.addEventListener("mousedown",this.shiftColor.create($C),false);}}
  122.                         else{$C.attachEvent("onmousedown",this.dragStart.create($C));
  123.                             if(!!C[1]){$C.attachEvent("onmousedown",this.shiftColor.create($C));}}
  124.                 }
  125.         }
  126.         this.initialize.apply(this,arguments);
  127. }
  128. //生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,arr[0]表示拖动层,arr[1]表示整体)
  129. new divDrag(
  130.     ['test'],
  131.     [$('test31'),$('test3')],
  132.     $('test1')
  133.     ,$('test2')
  134.     ,[$('test41'),$('test4')]);
  135. </script>
  136. </body>
  137. </html>

****************************************************************************

下面这个是可以选取拖动层上的文字和输入框的实现,其实就是在上面基础上添加了几个事件

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5. <title>zhou's html</title>
  6. </head>
  7. <body>
  8.                                                 一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的
  9. <div id="test" style='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>
  11. <div id="test1" style='border:6px solid #000000;left:1px;top:200px;width:150px;height:150px;background-color:#FF1A00;position:absolute;text-align:center'><span>Mozilla Red</span><br/><input type="text" style="width:80px" maxlength="9"/></div>
  13. <div id="test2" style='border:6px solid #000000;left:200px;top:800px;width:100px;height:100px;background-color:#EEEEEE;position:absolute;text-align:center'><span>Shiny silver</span><br/><input type="button" value="hit me"/></div>
  15. <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  16. <script type="text/javascript" charset="utf-8">
  17. var $=function(id){return document.getElementById(id)};
  18. Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
  19. function divDrag(){
  20.                 var A,B;
  21.         var zIndex=1;
  22.         this.dragStart=function(e){
  23.                 ee=e||window.event;
  24.                 if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;
  25.                 var pos=this.$pos;
  26.                                 if(document.defaultView){
  27.                                         _top=document.defaultView.getComputedStyle(this,null).getPropertyValue("top");
  28.                                         _left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");}
  29.                                 else{
  30.                                         if(this.currentStyle){_top=this.currentStyle["top"];_left=this.currentStyle["left"];}
  31.                                 }
  32.                 pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
  33.                 pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
  34.                                 if(!!A){
  35.                                          if(document.removeEventListener){
  36.                         document.removeEventListener("mousemove",A,false);
  37.                         document.removeEventListener("mouseup",B,false);
  38.                                         }else{
  39.                         document.detachEvent("onmousemove",A);
  40.                         document.detachEvent("onmouseup",B);
  41.                                                 document.detachEvent("ondragstart",G);
  42.                         }
  43.                                 }
  44.                                 A=this.dragMove.create(this);
  45.                 B=this.dragEnd.create(this);
  46.                 if(document.addEventListener){
  47.                                         document.addEventListener("mousemove",A,false);
  48.                     document.addEventListener("mouseup",B,false);
  49.                 }else{
  50.                                         document.attachEvent("onmousemove",A);
  51.                     document.attachEvent("onmouseup",B);
  52.                                                 G=function(){return false};
  53.                                                 document.attachEvent("ondragstart",G);
  54.                 }
  55.                 this.style.zIndex=(++zIndex);
  56.                 this.stop(e);
  57.         }
  58.         this.dragMove=function(e){
  59.                                 ee=e||window.event;
  60.                                 var pos=this.$pos;
  61.                 this.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
  62.                 this.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
  63.                                 this.stop(e);}
  64.         this.dragEnd=function(e){
  65.                 var pos=this.$pos;              
  66.                 ee=e||window.event;
  67.                                 
  68.                                 if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;
  69.                 if(document.removeEventListener){
  70.                         document.removeEventListener("mousemove",A,false);
  71.                         document.removeEventListener("mouseup",B,false);
  72.                                 }else{
  73.                         document.detachEvent("onmousemove",A);
  74.                         document.detachEvent("onmouseup",B);
  75.                                                 document.detachEvent("ondragstart",G);
  76.                 }
  77.                                 A=null;
  78.                                 B=null;
  79.                 this.style.zIndex=(++zIndex);
  80.                 this.stop(e);
  81.         }
  82.         this.position=function (e){ 
  83.                 var t=e.offsetTop;
  84.                 var l=e.offsetLeft;
  85.                 while(ee=e.offsetParent){ 
  86.                                 t+=e.offsetTop; 
  87.                                 l+=e.offsetLeft; 
  88.                 }
  89.                 return {x:l,y:t,ox:0,oy:0}
  90.         }
  91.         this.stop=function(e){
  92.                 if(e.stopPropagation){
  93.                         e.stopPropagation();
  94.                 }else{
  95.                         e.cancelBubble=true;}
  96.                         
  97.                 if(e.preventDefault){
  98.                         e.preventDefault();}
  99.                 else{e.returnValue=false;}
  100.         }
  101.                 this.stop1=function(e){
  102.                         ee=e||window.event;
  103.                 if(e.stopPropagation){
  104.                         e.stopPropagation();
  105.                 }else{
  106.                         e.cancelBubble=true;}
  108.         }
  109.         this.create=function(bind){
  110.                 var B=this;
  111.                 var A=bind;
  112.                 return function(e){
  113.                         return B.apply(A,[e]);
  114.                 }
  115.         }
  116.         thisthis.dragStart.create=this.create;
  117.         thisthis.dragMove.create=this.create;
  118.         thisthis.dragEnd.create=this.create;
  119.         
  120.         this.initialize=function(){
  121.                 for(var A=0,B=arguments.length;A<B;A++){
  122.                         C=arguments[A];
  123.                         C=(typeof(C)=='object')?C:(typeof(C)=='string'?$(C):null);
  124.                         if(!C)continue;
  125.                         C.$pos=this.position(C);
  126.                         C.dragMove=this.dragMove;
  127.                         C.dragEnd=this.dragEnd;
  128.                         C.position=this.position;
  129.                         C.stop=this.stop;
  130.                                                 var $A=[];
  131.                                                 $A=$A.extend(C.getElementsByTagName('span')||[]).extend(C.getElementsByTagName('input')||[]);
  132.                                                 for(var D=0,E=$A.length;D<E;D++){
  133.                                                         if(C.addEventListener){
  134.                                 $A[D].addEventListener("mousedown",this.stop1,false);
  135.                                                                 $A[D].addEventListener("mousemove",this.stop1,false);
  136.                                         }else{
  137.                                 $A[D].attachEvent("onmousedown",this.stop1);
  138.                                                                 $A[D].attachEvent("onmousemove",this.stop1);
  139.                                 }
  140.                                                 }
  141.                         if(C.addEventListener){
  142.                                 C.addEventListener("mousedown",this.dragStart.create(C),false);
  143.                         }else{
  144.                                 C.attachEvent("onmousedown",this.dragStart.create(C));
  145.                         }
  146.                 }
  148.         }
  149.         this.initialize.apply(this,arguments);
  150.         
  151. }
  152. //生成拖动层很简单
  153. new divDrag('test',$('test1'),$('test2'));
  154. </script>
  155. </body>
  156. </html>

 

fableking
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI基础入门之Draggable(拖拽)
LCore的专栏
06-02 9447
前面学习了easyui基础的解析器,加载器。对于他们入门阶段我们只需简单的了解下即可，毕竟先阶段并不会太过深入。接下来根据easyui官网文档的顺序安排学习下Draggable插件。 Draggable是什么        Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们可以实现控件的拖拽效果。        Draggble覆盖默认值$.fn.draggabl
js之完全兼容ie与firefox的拖动层代码[测试好用]
10-30
本文将深入讲解如何创建一个兼容IE与Firefox的拖动层，并分析给出的代码。 首先，拖动层的核心在于监听鼠标事件，然后根据用户的鼠标移动来改变层的位置。在提供的代码中，可以看到有三个ID分别为`test`、`test1`和...
IE和Firefox兼容性
crazy_qu的博客
05-10 1005
一、document.formName.item(“itemName”) 问题  问题说明：IE下，可以使 用 document.formName.item(“itemName”) 或 document.formName.elements ["elementName"]；Firefox 下，只能使用document.formName.elements["elemen
js实现拖动层，兼容IE/FireFox
继中的专栏
01-24 99
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
h5拖拽在兼容火狐与IE的实现需要注意的事
river、的博客
11-20 5780
拖拽在兼容火狐与IE的实现需要注意的事
禁止拖动js(兼容火狐与ie)
weixin_30755393的博客
01-04 198
<script> if (typeof(document.onselectstart) != "undefined") { document.onselectstart = function (event){ return true; } } else { ...
css修改浏览器滚动条样式（兼容IE，Chrome，Firefox）
MYG_G
07-03 4271
IE 写法：写在overflow同级的位置，由于在IE下transparent无效，故将滚动条置为页面背景色，以此规避丑丑的滚动条样式。 这几个属性文档说是兼容IE5.5，亲测IE11可以，低版本未测试。 用以下几个属性组合，就可以将滚动条变得和背景色一样： scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color
css改变滚动条样式兼容火狐_JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome...
weixin_35097945的博客
01-12 445
今天为大家分享一下我自己制作的浏览器滚动条，我们知道用css来自定义滚动条也是挺好的方式，css虽然能够改变chrome浏览器的滚动条样式可以自定义，css也能够改变IE浏览器滚动条的颜色。但是css只能是改变IE浏览器的颜色，而且CSS不能做到改变火狐浏览器的样式和颜色。所以只能是通过JavaScript来实现了。也有插件可以做到。我分享一下我自己使用原生JavaScript实现的思路。先上个图...
IE/FireFox具备兼容性的拖动代码
10-30
这段代码是关于实现一个在IE和Firefox浏览器中都具有兼容性的拖动功能的JavaScript代码。在Web开发中，由于不同的浏览器对某些API或特性的支持不同，因此编写跨浏览器的代码是必要的。这段代码就是为了解决这个问题...
代码短小的js div层拖动实现代码[兼容IE与Firefox]
10-29
这里，我们讨论的是一种简短的JavaScript代码，它实现了在IE和Firefox浏览器上兼容的div层拖动功能。 首先，我们需要了解这段代码的关键组成部分： 1. **变量声明**： - `ie` 和 `nn6` 是用来检测浏览器类型的...
一个很酷的拖动层的js类，兼容IE及Firefox
12-08
在给定的标题和描述中提到的"一个很酷的拖动层的js类，兼容IE及Firefox"，指的是一个经过优化的JavaScript拖动功能实现，该实现具有兼容性，不仅能在现代浏览器如Firefox上运行，还支持老旧的Internet Explorer（IE...
IE和firefox火狐在JS、css兼容区别
王德成的专栏
09-19 2140
IE和firefox火狐在JS、css兼容区别 1.firefox不能对innerText支持。 firefox支持innerHTML但却不支持innerText，它支持textContent来实现innerText，不过默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替。 2.禁止选取网页内容： 在IE中一般用js：o
tomcat和nginx实现动静分离
ibertine_P的博客
07-12 378
访问nginx就是静态页面，nginx代理index.jsp可以访问tomcat的动态页面。使用nginx访问192.168.10.41/index.jsp实现动态页面轮询功能。5、访问nginx服务出现轮询。配置server.conf。2、tomcat1 的配置。3、tomcat2 的配置。配置server.conf。1、设备以及IP地址。
udp分片报文pcap文件
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
计算机教学导案.doc
07-18
计算机
摩根：2024年大市前瞻.pdf
最新发布
07-18
摩根：2024年大市前瞻
"专业 CSS兼容IE和Firefox技巧集合
这些技巧可以帮助网页设计师更好地处理CSS兼容IE和Firefox的问题，确保网站在不同浏览器上的正常显示。如果学习并掌握了这些技巧，就能够更加轻松地应对不同浏览器的兼容性问题，提高网页的用户体验。因此，对于有关...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值