一个很酷的拖动层的js类,兼容IE及Firefox

  自己优化修改了网上的一个JS拖动类,增加了拖动时显示半透明的特效。 http://www.glzy8.com/article/16122.htm

  注意,本文类中的Cminfo类请 查看:

  http://www.glzy8.com/article/18760.htm

  

复制代码 代码如下:

  //*********************************移动层 函数 开始*******************************************

  //生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,arr[0]表示拖动层,arr[1]表示整体)

  //new divDrag(['test'], [getObject('test31'),getObject('test3')], getObject('test1') ,getObject('test2') ,[getObject('test41'),getObject('test4')]);

  //记得有拖动属性的层position:absolute;

  Array.prototype.extend = function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}

  function divDrag()

  {

  var A,B,gCn;

  var zIndex = 1;

  this.dragStart = function(e)

  {

  e = e||window.event;

  if((e.which && (e.which!=1))||(e.button && (e.button!=1))){return;}

  var pos = this.gPos;

  gCn = this.parent||this;

  if(document.defaultView)

  {

  _top = document.defaultView.getComputedStyle(gCn,null).getPropertyValue("top");

  _left = document.defaultView.getComputedStyle(gCn,null).getPropertyValue("left");

  }

  else

  {

  if(gCn.currentStyle)

  {

  _top = gCn.currentStyle["top"];

  _left = gCn.currentStyle["left"];

  }

  }

  pos.ox = (e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);

  pos.oy = (e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);

  if(!!A)

  {

  if(document.removeEventListener)

  {

  document.removeEventListener("mousemove",A,false);

  document.removeEventListener("mouseup",B,false);

  }

  else

  {

  document.detachEvent("onmousemove",A);

  document.detachEvent("onmouseup",B);

  }

  }

  A = this.dragMove.create(this);

  B = this.dragEnd.create(this);

  if(document.addEventListener)

  {

  document.addEventListener("mousemove",A,false);

  document.addEventListener("mouseup",B,false);

  }

  else

  {

  document.attachEvent("onmousemove",A);

  document.attachEvent("onmouseup",B);

  }

  gCn.style.zIndex = (++zIndex);

  }

  this.dragMove = function(e)

  {

  e = e||window.event;

  var pos = this.gPos;

  gCn = this.parent||this;

  gCn.style.top = (e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';

  gCn.style.left = (e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';

  try{if(CMInfo.Bs_Name=='IE'){gCn.style.filter = "alpha(opacity=70)";}else{gCn.style.opacity = "0.7";}}catch(e){}

  this.stop(e);

  }

  this.dragEnd = function(e)

  {

  var pos = this.gPos;

  e = e||window.event;

  if((e.which && (e.which!=1))||(e.button && (e.button!=1))){return};

  gCn = this.parent||this;

  if(!!(this.parent)){this.style.backgroundColor = pos.color;}

  try{if(CMInfo.Bs_Name=='IE'){gCn.style.filter = "alpha(opacity=100)";}else{gCn.style.opacity = 1;}}catch(e){}

  if(document.removeEventListener)

  {

  document.removeEventListener("mousemove",A,false);

  document.removeEventListener("mouseup",B,false);

  }

  else

  {

  document.detachEvent("onmousemove",A);

  document.detachEvent("onmouseup",B);

  }

  A = null;

  B = null;

  gCn.style.zIndex = (++zIndex);

  this.stop(e);

  }

  this.shiftColor = function()

  {

  this.style.backgroundColor="#EEEEEE";

  }

  this.position = function (e)

  {

  var t=e.offsetTop;

  var l=e.offsetLeft;

  while(e=e.offsetParent)

  {

  t += e.offsetTop;

  l += e.offsetLeft;

  }

  return {x:l,y:t,ox:0,oy:0,color:null}

  }

  this.stop = function(e)

  {

  if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}

  if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;}

  }

  this.create = function(bind)

  {

  var B = this;

  var A = bind;

  return function(e){return B.apply(A,[e]);}

  }

  this.dragStart.create = this.create;

  this.dragMove.create = this.create;

  this.dragEnd.create = this.create;

  this.shiftColor.create = this.create;

  this.initialize = function()

  {

  for(var A=0,B=arguments.length;A<B;A++)

  {

  C=arguments[A];

  if(!(C.push)){C = [C];}

  gC = (typeof(C[0])=='object')?C[0]:(typeof(C[0])=='string'?getObject(C[0]):null);

  if(!gC){continue};

  gC.gPos = this.position(gC);

  gC.dragMove = this.dragMove;

  gC.dragEnd = this.dragEnd;

  gC.stop = this.stop;

  if(!!C[1])

  {

  gC.parent = C[1];

  gC.gPos.color = gC.style.backgroundColor;

  }

  if(gC.addEventListener)

  {

  gC.addEventListener("mousedown",this.dragStart.create(gC),false);

  if(!!C[1]){gC.addEventListener("mousedown",this.shiftColor.create(gC),false);    }

  }

  else

  {

  gC.attachEvent("onmousedown",this.dragStart.create(gC));

  if(!!C[1]){gC.attachEvent("onmousedown",this.shiftColor.create(gC));}

  }

  }

  }

  this.initialize.apply(this,arguments);

  }

  //*********************************移动层 函数 结束*******************************************