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

JS拖动技术

2013年12月06日 ⁄ 综合 ⁄ 共 2877字 ⁄ 字号 评论关闭
 <SCRIPT language="javascript">
var Obj=''
var index=10000;//z-index;
document.onmouseup=onMouseUp
document.onmousemove=onMouseMove
function onMouseDown(Object){
 Obj=getObject(Object).id
 document.all(Obj).setCapture();
 pX=event.x-document.all(Obj).style.pixelLeft;
 pY=event.y-document.all(Obj).style.pixelTop;
}
function onMouseMove(){
 if(Obj!=''){
  document.all(Obj).style.left=event.x-pX;
  document.all(Obj).style.top=event.y-pY;
 }
}
function onRemove(){
 if (event){
  lObj = event.srcElement ;
  n=0;
  while (lObj && n<5) {
   lObj = lObj.parentElement ;
   if(lObj.tagName=="DIV") break;
   n++;
  }
 }
 var id=lObj.id
 document.getElementById(id).removeNode(true);
}
function onMouseUp(){
 if(Obj!=''){
  document.all(Obj).releaseCapture();
  Obj='';
 }
}
function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId)) {
 // W3C DOM
 return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
 // MSIE 4 DOM
 return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
 // NN 4 DOM.. note: this won't find nested layers
 return document.layers[objectId];
    } else {
 return false;
    }
}
</SCRIPT>
  
<div id="obj11" style="POSITION: absolute;">
  <table>              
 <tr>
   <td onMouseDown="onMouseDown('obj11');" style="CURSOR: move">移动
  <a title=关闭纸条 style="CURSOR: hand" onClick=onRemove()>×</a></div>
   </td>
 
 </tr>
 <tr>
   <td style="CURSOR: default">
    <div>第11条</div>
    <div>11asdfasdf<BR> </div>
  </td>
 </tr>
  </table>
</div>
仅支持ie
-----------------------------------------------------------------------------------------------------------------
以下支持ff ie
 

<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; cursor:move" >drag me <div>

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

 

抱歉!评论已关闭.