JavaScript のドラッグ クラス
著者：Eve Cole
更新時間：2009-06-11 16:31:49
<HTML>
<頭>
<スクリプト言語="JavaScript">
<!--
var ドラッグ = {
SX:0、
sy:0、
例：0、
ey:0、
lx：0、
ly:0、
オフセットX : 0、
オフセットY : 0、
cdom : null、
ドラッグ可能: false、
ドラッグファン: null、
tempDrag : function(){
ドラッグ.ドラッグ.コール(ドラッグ);
}、
キャッシュ: {}、
putCache : function(key,v){
this.cache[キー] = v;
}、
getCache : 関数(キー){
this.cache[キー]を返します;
}、
ドラッグスタート: function(dfun,fn){
試す{
if(!this.dragAble){
this.cdom = イベント.srcElement?event.srcElement:event.target;
this.cdom.setCapture(true);
this.sx = イベント.screenX;
this.sy = イベント.スクリーンY;
this.ex = イベント.screenX;
this.ey = イベント.スクリーンY;
this.lx = イベント.screenX;
this.ly = イベント.スクリーンY;
this.dragAble = true;
this.dragFun = dfun?dfun:null;
if(fn){fn();}
this.cdom.attachEvent("onmousemove",Drag.tempDrag);
}
}キャッチ(e){
this.dragEnd();
}
}、
ドラッグ: function(){
試す{
if(this.dragAble){
this.ex = イベント.screenX;
this.ey = イベント.スクリーンY;
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);
}
}、
ドラッグエンド:関数(fn){
if(this.dragAble){
this.cdom.detachEvent("onmousemove",Drag.tempDrag);
this.cdom.releaseCapture();
this.ex = イベント.screenX;
this.ey = イベント.スクリーンY;
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 = {};
}
};
関数 start(){
var d = ドラッグ.cdom.cloneNode(true);
var pos = getBodyPos(Drag.cdom);
with(d.style){
位置 = "絶対";
左=左の位置;
トップ=位置トップ;
filter='Alpha(Opacity="30")' ;
}
Drag.putCache("alo",d);
document.body.appendChild(d);
}
関数ing(){
var offx = ドラッグ.オフセットX;
var offy = ドラッグ.オフセットY;
var to = Drag.getCache("alo");
var l = to.offsetLeft;
var t = to.offsetTop;
with(to.style){
左=l+offx;
トップ=t+offy;
}
}
関数end(){
var cdom = ドラッグ.cdom;
var alo = Drag.getCache("alo");
with(cmdom.style)
{
left=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){
アラート(電子メッセージ);
}
}
//-->
</スクリプト>
</HEAD>
<本体>
<div style="border:solid 1 #7FFFD4;width:300;height:150;background:#3399FF;cursor:move;" onmousedown="Drag.dragStart(ing,start)" onmouseup="Drag.dragEnd(end)">
テストドラッグオブジェクト
</div>
</BODY>
</HTML>
