Javascript 一个拖动类

【 tulaoshi.com - Web开发 】

HTML
 HEAD
  SCRIPT LANGUAGE="JavaScript"
  !--
 var Drag = {
  sx : 0,
  sy : 0,
  ex : 0,
  ey : 0,
  lx : 0,
  ly : 0,
  offsetX : 0,
  offsetY : 0,
  cdom : null,
  dragAble : false,
  dragFun : null,
  tempDrag : function(){
   Drag.drag.call(Drag);
  },
  cache : {},
  putCache : function(key,v){
   this.cache[key] = v;
  },
  getCache : function(key){
   return this.cache[key];
  },
  dragStart : function(dfun,fn){
   try{
    if(!this.dragAble){
     this.cdom = event.srcElement？event.srcElement:event.target;
     this.cdom.setCapture(true);
     this.sx = event.screenX;
     this.sy = event.screenY;
     this.ex = event.screenX;
     this.ey = event.screenY;
     this.lx = event.screenX;
     this.ly = event.screenY;
     this.dragAble = true;
     this.dragFun = dfun？dfun:null;
     if(fn){fn();}
     this.cdom.attachEvent("onmousemove",Drag.tempDrag);
    }
   }catch(e){
    this.dragEnd();
   }
  },
  drag : function(){
   try{
  
    if(this.dragAble){
     this.ex = event.screenX;
     this.ey = event.screenY;
     this.offsetX = this.ex - this.lx;
     this.offsetY = this.ey - this.ly;
     if(this.dragFun){this.dragFun();}
     this.lx = this.ex;
     this.ly = this.ey;
    }
   }
   catch(e){
    this.dragEnd(null);
   }
  },
  dragEnd : function(fn){
   if(this.dragAble){
    this.cdom.detachEvent("onmousemove",Drag.tempDrag);
    this.cdom.releaseCapture();
    this.ex = event.screenX;
    this.ey = event.screenY;
    this.dragAble = false;
    if(fn){fn();}
   }
   this.releaseDrag();
  },

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）  releaseDrag : function(){
   this.ex = 0;
   this.ey = 0;
   this.sx = 0;
   this.sy = 0;
   this.cdom = null;
   this.dragAble = false;
   this.dragFun = null;
   this.cache = {};
  }
 };
 
 function start(){
  var d = Drag.cdom.cloneNode(true);
  var pos = getBodyPos(Drag.cdom);
  with(d.style){
   position="absolute";
   left=pos.left;
   top=pos.top;
   filter='Alpha(Opacity="30")' ;
  }
  Drag.putCache("alo",d);
  document.body.appendChild(d);
 
 }
 function ing(){
  var offx = Drag.offsetX;
  var offy = Drag.offsetY;
  var to = Drag.getCache("alo");
  var l = to.offsetLeft;
  var t = to.offsetTop;
  with(to.style){
   left=l+offx;
   top=t+offy;
  }
 }
 function end(){
  var cdom = Drag.cdom;
  var alo = Drag.getCache("alo");
  with(cdom.style)
  {
   left=alo.offsetLeft;
   top=alo.offsetTop;
   position="absolute";
  }
  if(alo)
   document.body.removeChild(alo);
 }
 function getBodyPos(obj){
  try{
   var l = obj.offsetLeft;
   var t = obj.offsetTop;
   while(obj.parentElement != document.body){
    obj = obj.parentElement;
    var tl = obj.offsetLeft;
    var tt = obj.offsetTop;
    l += tl;
    t += tt;
   }
   return {left:l,top:t};
  }catch(e){
   alert(e.message);
  }
 }
  //--
  /SCRIPT
 /HEAD
 BODY
  div style="border:solid 1 #7FFFD4;width:300;height:150;background:#3399FF;cursor:move;" onmousedown="Drag.dragStart(ing,start)" onmouseup="Drag.dragEnd(end)"
  Test Drag Object
  /div
 /BODY
/HTML