首页 > 网站 > WEB开发 > 正文

Javascript 一个拖动类

2024-04-27 14:03:27
字体：大 中 小
来源：转载
供稿：网友
<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();
  },
  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>

上一篇：JavaScript 选择下拉列表项，弹出新窗口打开连接页面

下一篇：CSS 让IE ff Opera同时支持Alpha透明

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有