js层拖动

最新推荐文章于 2022-06-22 14:14:50 发布

dou_ye

最新推荐文章于 2022-06-22 14:14:50 发布

阅读量956

点赞数

分类专栏： jscript 文章标签： function html 存储 ie

jscript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>

   <head>

      <script>

       <!--

          function   beginDrag(elementToDrag,event){
          //计算元素原左上角与鼠标的距离
          //moveHandler要这值
          /*计算对象与鼠标之间的距离，x，y坐标*/
          var   delatX=event.clientX-parseInt(elementToDrag.style.left);
          var   delatY=event.clientY-parseInt(elementToDrag.style.top);
       //注册响应mousemove和mousedown事件后的mouseup事件的处理程序
              if(document.addEventListener){     //2级DOM事件模型
                  //注册捕捉事件处理程序
                  document.addEventListener("mousemove",moveHandler,true); //添加事件，并设置事件的相应顺序 true为先执行 moveHandler（）
                  document.addEventListener("mouseup",upHandler,true);
              }
              else if(document.attachEvent){   //IE5+   的事件模型
                  /*在IE事件模型中，我们不能捕捉事件，所以只有当事件起泡到这些处理程序时,
                  它们才被触发.   假设不存在干涉元素,   处理了事件后它们就停止传播*/
                  document.attachEvent("onmousemove",moveHandler);
                  document.attachEvent("onmouseup",upHandler);
              }
              else{
                  //IE4事件模型
                  //IE4我们不能使用attachEvent方法,所以存储了以前赋予的处理
                  //程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序.
                  //注意,这样依赖于事件起泡.
                  var oldmovehandler=document.onmousemove;
                  var olduphandler=document.onmouseup;
                  document.οnmοusemοve=moveHandler;
                  document.οnmοuseup=upHandler;
              }
              //我们处理了该事件,不要再让其他元素看见.
              if(event.stopPropagation)event.stopPropagation();   //2   级DOM
              else event.cancelBubble=true; //IE
              //下面禁止执行默认动作
              if(event.preventDefault)event.preventDefault();     //2级DOM
              else event.returnValue=false; //IE
              /*这是元素被拖动时捕捉mousemove事件的处理程序.
              * 它负责移动元素
              */
              function moveHandler(e){
                  if(!e)e=window.event; //IE事件模型;
               //把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
                  elementToDrag.style.left=(e.clientX-delatX)+"px"; //e.clientX 鼠标位置
                  elementToDrag.style.top=(e.clientY-delatY)+"px";
                  //不要再让其他元素看到该事件.
                  if(e.stopPropagation)e.stopPropagation();     //2级DOM
                  else e.cancelBubble=true; //IE
              }
              /*     这是捕捉拖移结束最后发生的mouseup事件的处理程序.
                */
              function upHandler(e){
                  if(!e)   e=window.event; //IE事件模型.
                  //注销捕捉事件程序.
                  if(document.removeEventListener){//DOM事件模型
                      document.removeEventListener("mouseup",upHandler,true);
                      document.removeEventListener("mousemove",moveHandler,true);
                 }
                  else if(document.detachEvent){//IE5+事件模型
                      document.detachEvent("onmouseup",upHandler);
                      document.detachEvent("onmousemove",moveHandler);
                  }
                  else{//IE事件模型
                      document.οnmοuseup=olduphandler;
                      document.onousemove=oldmovehandler;
                  }
                  //不要再让事件进一步传播.
                  if(e.stopPropagation)   e.stopPropagation();     //2级DOM
                  else e.cancelBubble = true; //IE
             }
          }
          -->
      </script>
   </head>
<body>
      <img src="csdn.gif" style="position:absolute;left:0px;top:0px;" οnmοusedοwn="beginDrag(this,event);">
</body>
</html>

dou_ye

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
js层拖动

<!-- function beginDrag(elementToDrag,event){ //计算元素原左上角与鼠标的距离 //moveHandler要这值 /*计算对象与鼠标之间的距离，x，y坐标*/ var dela
复制链接

扫一扫