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>
