现在的位置: 首页 > 综合 > 正文

Div 层的拖动 脚本

2013年04月09日 ⁄ 综合 ⁄ 共 3329字 ⁄ 字号 小 中 大 ⁄ 评论关闭
JavaScript
  5. // JScript 文件
  7. /***********************窗口拖动************************/ 
  8.   function   beginDrag(elementToDrag,event) 
  9.   { 
  10. //计算元素原左上角与鼠标的距离 
  11.       //moveHandler要这值 
  12.       /*计算对象与鼠标之间的距离，x，y坐标*/ 
  13.       var   delatX=event.clientX-parseInt(elementToDrag.style.left); 
  14.       var   delatY=event.clientY-parseInt(elementToDrag.style.top); 
  16.       //注册响应mousemove和mousedown事件后的mouseup事件的处理程序 
  17.       if(document.addEventListener) 
  18.       {     //2级DOM事件模型 
  19.           //注册捕捉事件处理程序 
  20.           document.addEventListener("mousemove",moveHandler,true); //添加事件，并设置事件的相应顺序 true为先执行 moveHandler() 
  21. document.addEventListener("mouseup",upHandler,true); 
  22.       } 
  23.       else if(document.attachEvent) 
  24.       {   //IE5+   的事件模型 
  25.    
  26.           /*在IE事件模型中，我们不能捕捉事件，所以只有当事件起泡到这些处理程序时, 
  27.           它们才被触发.   假设不存在干涉元素,   处理了事件后它们就停止传播*/ 
  28.        
  29.           document.attachEvent("onmousemove",moveHandler); 
  30.           document.attachEvent("onmouseup",upHandler); 
  31.       } 
  32.       else 
  33.       { 
  34.           //IE4事件模型 
  35.           //IE4我们不能使用attachEvent方法,所以存储了以前赋予的处理 
  36.           //程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序. 
  37.           //注意,这样依赖于事件起泡. 
  38.           var oldmovehandler=document.onmousemove; 
  39.           var olduphandler=document.onmouseup; 
  40.           document.onmousemove=moveHandler; 
  41.           document.onmouseup=upHandler; 
  42.       } 
  43.       //我们处理了该事件,不要再让其他元素看见. 
  44.       if(event.stopPropagation) 
  45.         event.stopPropagation();   //2   级DOM 
  46.       else 
  47.         event.cancelBubble=true; //IE 
  48.    
  49.       //下面禁止执行默认动作 
  50. if(event.preventDefault) 
  51.         event.preventDefault();     //2级DOM 
  52.       else 
  53.         event.returnValue=false; //IE 
  54.          
  55.       /*这是元素被拖动时捕捉mousemove事件的处理程序. 
  56.       * 它负责移动元素 
  57.       */ 
  58.       function moveHandler(e) 
  59.       { 
  60.           if(!e)e=window.event; //IE事件模型; 
  61.        //把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整 
  62.           elementToDrag.style.left=(e.clientX-delatX)+"px"; //e.clientX 鼠标位置 
  63.           elementToDrag.style.top=(e.clientY-delatY)+"px"; 
  64.           //不要再让其他元素看到该事件. 
  65.           if(e.stopPropagation)e.stopPropagation();     //2级DOM 
  66.           else e.cancelBubble=true; //IE 
  67.       } 
  68.       /*     这是捕捉拖移结束最后发生的mouseup事件的处理程序. 
  69.         */ 
  70.       function upHandler(e) 
  71.       { 
  72.           if(!e)   e=window.event; //IE事件模型. 
  73.           //注销捕捉事件程序. 
  74.           if(document.removeEventListener){//DOM事件模型 
  75.               document.removeEventListener("mouseup",upHandler,true); 
  76.               document.removeEventListener("mousemove",moveHandler,true); 
  77.          } 
  78.           else if(document.detachEvent){//IE5+事件模型 
  79.               document.detachEvent("onmouseup",upHandler); 
  80.               document.detachEvent("onmousemove",moveHandler); 
  81.           } 
  82.           else{//IE事件模型 
  83.               document.onmouseup=olduphandler; 
  84.               document.onousemove=oldmovehandler; 
  85.           } 
  86.  //不要再让事件进一步传播. 
  87.           if(e.stopPropagation)   e.stopPropagation();     //2级DOM 
  88.           else e.cancelBubble = true; //IE 
  89.      } 
  90.   } 

Html代码：

  3. <body>
  4.     <div id="objPlay" style=" background-color:Yellow; width: 200px; height: 200px; position: absolute; left: 0px;
  5.         top: 0px; z-index: 1; position:absolute;top:200px;left:200px" onmousedown="beginDrag(this,event);">
  6.     </div>
  7.     <div id="Div1" style=" background-color:Yellow; width: 200px; height: 200px; position: absolute; left: 0px;
  8.         top: 0px; z-index: 1;position:absolute;top:400px;left:400px" onmousedown="beginDrag(this,event);">
  9.     </div>
  10. </body>

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞