Javascript 一个拖动类
作者:Eve Cole
更新时间:2009-06-11 16:31:49
<HTML>
<头>
<脚本语言=“JavaScript”>
<!--
var 拖动 = {
SX:0,
西:0,
例如:0,
埃:0,
勒克斯:0,
: 0,
偏移X:0,
偏移Y:0,
cdom:空,
可拖动:假,
拖动乐趣:空,
临时拖动:函数(){
Drag.drag.call(拖动);
},
缓存 : {},
putCache :函数(键,v){
this.cache[key] = v;
},
获取缓存:函数(键){
返回 this.cache[key];
},
拖动开始:函数(dfun,fn){
尝试{
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);
}
}抓住(e){
this.dragEnd();
}
},
拖动:函数(){
尝试{
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();}
这个.lx = 这个.ex;
这个.ly = 这个.ey;
}
}
捕获(e){
this.dragEnd(null);
}
},
拖动结束:函数(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();
},
释放拖动:函数(){
这个.ex = 0;
这个.ey = 0;
这个.sx = 0;
这个.sy = 0;
this.cdom = null;
this.dragAble = false;
this.dragFun = null;
this.cache = {};
}
};
函数开始(){
var d = Drag.cdom.cloneNode(true);
var pos = getBodyPos(Drag.cdom);
与(d.style){
位置=“绝对”;
左=pos.左;
顶部=位置.顶部;
过滤='阿尔法(不透明度=“30”)';
}
Drag.putCache("alo",d);
document.body.appendChild(d);
}
函数ing(){
var offx = Drag.offsetX;
var offy = Drag.offsetY;
var to = Drag.getCache("alo");
var l = to.offsetLeft;
var t = to.offsetTop;
与(to.style){
左=l+offx;
顶部=t+offy;
}
}
函数结束(){
var cdom = Drag.cdom;
var alo = Drag.getCache("alo");
与(cdom.style)
{
左=alo.offsetLeft;
顶部=alo.offsetTop;
位置=“绝对”;
}
如果(阿洛)
document.body.removeChild(alo);
}
函数 getBodyPos(obj){
尝试{
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;
}
返回{左:l,上:t};
}抓住(e){
警报(e.消息);
}
}
//-->
</脚本>
</头>
<身体>
<div style="border:solid 1 #7FFFD4;宽度:300;高度:150;背景:#3399FF;光标:移动;" onmousedown="Drag.dragStart(ing,start)" onmouseup="Drag.dragEnd(end)">
测试拖动对象
</div>
</正文>
</HTML>