Javascript 一个拖动类

顾客要的是甜

顾客要的是甜

2016-02-19 15:51

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享Javascript 一个拖动类,希望可以对大家能有小小的帮助。

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();
  },

(本文来源于图老师网站,更多请访问http://m.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
展开更多 50%)
分享

猜你喜欢

Javascript 一个拖动类

Web开发
Javascript 一个拖动类

非常不错的一个javascript 类

Web开发
非常不错的一个javascript 类

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

拖动一个HTML元素

Web开发
拖动一个HTML元素

一个非常实用的Javascript类库

Web开发
一个非常实用的Javascript类库

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

一个强制弹出窗口的JavaScript类:ForceWindow

电脑网络
一个强制弹出窗口的JavaScript类:ForceWindow

一个不用onmouseup的拖动函数

Web开发
一个不用onmouseup的拖动函数

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

利用Visual C#实现ICMP网络协议

利用Visual C#实现ICMP网络协议

ACCESS 建立视图

ACCESS 建立视图
下拉加载更多内容 ↓