JS高级拖动技术--- setCapture ，releaseCapture

最新推荐文章于 2024-05-30 14:43:45 发布

转载最新推荐文章于 2024-05-30 14:43:45 发布 · 422 阅读

文章标签：

#function #浏览器 #null #border #div

js 专栏收录该内容

46 篇文章

订阅专栏

本文将介绍如何使用JavaScript和DOM操作实现元素的拖放功能，包括捕获、移动和释放事件的处理。

function drag(dv){
dv.onmousedown=function(e){
      var d=document;
      e = e || window.event;

      var x= e.layerX || e.offsetX;
      var y= e.layerY || e.offsetY;

      //设置捕获范围
      if(dv.setCapture){
          dv.setCapture();
      }else if(window.captureEvents){
          window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
      }

      d.onmousemove=function(e){
           e= e || window.event;
           if(!e.pageX)e.pageX=e.clientX;
           if(!e.pageY)e.pageY=e.clientY;
           var tx=e.pageX-x;
           var ty=e.pageY-y;

           dv.style.left=tx;
           dv.style.top=ty;
      };

      d.onmouseup=function(){
          //取消捕获范围
           if(dv.releaseCapture){
              dv.releaseCapture();
           }else if(window.captureEvents){
              window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
           }

          //清除事件
          d.onmousemove=null;
          d.onmouseup=null;
      };
   };
}
//-->
</script>

<div id="drag" style="position:absolute;left:12px;top:24px;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">drag me</div>

--------------------------------------
setCapture 的意思就是设置一个对象的方法被触发的范围，或者作用域。
如果不设置，则div只在当前窗口内被触发。如果设置，则在整个浏览器范围内被触发，也就是可以拖到浏览器外面