科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)

Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox) 说明: 拖曳流程鼠标按下->(鼠标移动->元素移动) 鼠标按键弹起->元素停止移动 .

作者:btbtd 来源:CSDN 2008年3月17日

关键字: 兼容 拖拽 java

  • 评论
  • 分享微博
  • 分享邮件
说明: 
拖曳流程
鼠标按下->(鼠标移动->元素移动)
鼠标按键弹起->元素停止移动

针对 IE, 主要使用 obj.attachEvent() && obj.detachEvent()
针对 Firefox 主要使用 DOM 2 的 obj.addEventListener() && obj.removeEventListener
Opera 以上两种方法都支持

在本文中, 需要拖曳的元素必须指定style 属性为 position:absolute; 
且应指定 left && top 的坐标值, 如:
    linenum
  1.     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" onmousedown="fDragging(this, event, true);">
  2.         element 1<br/>
  3.         dragging compatibility for IE, Opera, Firefox. 
  4.     </div>

函数 fDragging(obj, e, limit) 的各参数解释:
obj: HTML元素对象, 要拖曳的元素
e: 指定为 event 对象, 主要为兼容 Firefox
limit: 布尔值, 指定是否只能在父元素中拖曳, false 可移动至任何位置. 

函数 fDragging(obj, e, limit) 应该在 HTML onmousedown 属性 下使用, 如: 
    linenum
  1.     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" onmousedown="fDragging(this, event, true);">
  2.         element <br/>
  3.         dragging compatibility for IE, Opera, Firefox. 
  4.     </div>

shawl.qiu 


函数: fDragging(obj, e, limit) 及使用演示
    linenum
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns=" http://www.w3.org/1999/xhtml">
  3. <!-- DW6 -->
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>shawl.qiu template</title>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.     function fDragging(obj, e, limit){
  10.         if(!e) e=window.event;
  11.         var x=parseInt(obj.style.left);
  12.         var y=parseInt(obj.style.top);
  13.         
  14.         var x_=e.clientX-x;
  15.         var y_=e.clientY-y;
  16.         
  17.         if(document.addEventListener){
  18.             document.addEventListener('mousemove', inFmove, true);
  19.             document.addEventListener('mouseup', inFup, true);
  20.         } else if(document.attachEvent){
  21.             document.attachEvent('onmousemove', inFmove);
  22.             document.attachEvent('onmouseup', inFup);
  23.         }
  24.         
  25.         inFstop(e);    
  26.         inFabort(e)
  27.         
  28.         function inFmove(e){
  29.             var evt;
  30.             if(!e)e=window.event;
  31.             
  32.             if(limit){
  33.                 var op=obj.parentNode;
  34.                 var opX=parseInt(op.style.left);
  35.                 var opY=parseInt(op.style.top);
  36.                 
  37.                 if((e.clientX-x_)<0) return false;
  38.                 else if((e.clientX-x_+obj.offsetWidth+opX)>(opX+op.offsetWidth)) return false;
  39.                 
  40.                 if(e.clientY-y_<0) return false;
  41.                 else if((e.clientY-y_+obj.offsetHeight+opY)>(opY+op.offsetHeight)) return false;
  42.                 //status=e.clientY-y_;
  43.             }
  44.             
  45.             obj.style.left=e.clientX-x_+'px';
  46.             obj.style.top=e.clientY-y_+'px';
  47.             
  48.             inFstop(e);
  49.         } // shawl.qiu script
  50.         function inFup(e){
  51.             var evt;
  52.             if(!e)e=window.event;
  53.             
  54.             if(document.removeEventListener){
  55.                 document.removeEventListener('mousemove', inFmove, true);
  56.                 document.removeEventListener('mouseup', inFup, true);
  57.             } else if(document.detachEvent){
  58.                 document.detachEvent('onmousemove', inFmove);
  59.                 document.detachEvent('onmouseup', inFup);
  60.             }
  61.             
  62.             inFstop(e);
  63.         } // shawl.qiu script
  64.         function inFstop(e){
  65.             if(e.stopPropagation) return e.stopPropagation();
  66.             else return e.cancelBubble=true;            
  67.         } // shawl.qiu script
  68.         function inFabort(e){
  69.             if(e.preventDefault) return e.preventDefault();
  70.             else return e.returnValue=false;
  71.         } // shawl.qiu script
  72.     }
  73. //]]>
  74. </script>
  75. </head>
  76. <body>
  77. <div  style=" border:1px dashed blue; width: 760px; height:600px;  text-align:center; position:absolute; left:100px; top: 10px;"> this parent
  78.     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:50px; top: 50px;" onmousedown="fDragging(this, event, true);">
  79.         element <br/>
  80.         dragging compatibility for IE, Opera, Firefox. 
  81.     </div>
  82.     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:100px; top: 150px;" onmousedown="fDragging(this, event, true);">
  83.         element 1<br/>
  84.         dragging compatibility for IE, Opera, Firefox. 
  85.     </div>
  86.     <div style=" border:1px dashed blue; width: 180px; text-align:center; position:absolute; left:200px; top: 250px;" onmousedown="fDragging(this, event, false);">
  87.         element 2<br/>
  88.         dragging compatibility for IE, Opera, Firefox. <br/>
  89.         <font color="red">dragging everywhere</font>
  90.     </div>
  91. </div>
  92. </body>
  93. </html>


    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章