您的位置:首页 > Web前端 > JavaScript

JS拖动技术--- 关于setCapture

2013-11-20 23:16 585 查看
<script type="text/javascript">

<!--

window.onload=function(){

  objDiv = document.getElementById('drag');

  drag(objDiv);

};

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>

转载出处:http://blog.csdn.net/fox123871/article/details/6630145
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  setCapture JS拖动