자바스크립트 드래그 클래스
저자：Eve Cole
업데이트 시간：2009-06-11 16:31:49
<HTML>
<헤드>
<SCRIPT LANGUAGE="자바스크립트">
<!--
var 드래그 = {
sx : 0,
사이 : 0,
예 : 0,
응 : 0,
1x : 0,
리 : 0,
오프셋X : 0,
오프셋Y : 0,
CDOM : null,
드래그 가능 : 거짓,
드래그펀: null,
tempDrag : 함수(){
Drag.drag.call(드래그);
},
캐시: {},
putCache : 함수(키,v){
this.cache[키] = v;
},
getCache : 함수(키){
return this.cache[키];
},
dragStart : 함수(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();}
this.lx = this.ex;
this.ly = this.ey;
}
}
잡기(e){
this.dragEnd(null);
}
},
dragEnd : 함수(fn){
if(this.dragAble){
this.cdom.detachEvent("onmousemove",Drag.tempDrag);
this.cdom.releaseCapture();
this.ex = event.screenX;
this.ey = event.screenY;
this.dragAble = 거짓;
if(fn){fn();}
}
this.releaseDrag();
},
releaseDrag : 함수(){
this.ex = 0;
this.ey = 0;
this.sx = 0;
this.sy = 0;
this.cdom = null;
this.dragAble = 거짓;
this.dragFun = null;
this.cache = {};
}
};
함수 시작(){
var d = Drag.cdom.cloneNode(true);
var pos = getBodyPos(Drag.cdom);
with(d.스타일){
위치="절대";
왼쪽=pos.left;
상단=pos.top;
필터='알파(불투명도="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;
with(to.style){
왼쪽=l+offx;
상단=t+offy;
}
}
함수 끝(){
var cdom = Drag.cdom;
var alo = Drag.getCache("alo");
(cdom.style)을 사용하여
{
왼쪽=alo.offsetLeft;
top=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;
내가 += tl;
t += tt;
}
return {왼쪽:l,top:t};
}잡기(e){
경고(e.메시지);
}
}
//-->
</SCRIPT>
</HEAD>
<본문>
<div 스타일="테두리:단색 1 #7FFFD4;너비:300;높이:150;배경:#3399FF;커서:이동;" onmousedown="Drag.dragStart(ing,start)" onmouseup="Drag.dragEnd(end)">
테스트 드래그 개체
</div>
</BODY>
</HTML>
