Javascript une classe de glisser
Auteur：Eve Cole
Date de mise à jour：2009-06-11 16:31:49
<HTML>
<TÊTE>
<LANGUE SCRIPT="JavaScript">
<!--
var Glisser = {
sexe : 0,
sy : 0,
ex : 0,
hé : 0,
lx : 0,
ly : 0,
décalageX : 0,
décalageY : 0,
cdom : nul,
dragAble : faux,
dragFun : nul,
tempDrag : fonction(){
Faites glisser.drag.call(Drag);
},
cache : {},
putCache : fonction(clé,v){
this.cache[clé] = v;
},
getCache : fonction(clé){
renvoie this.cache[clé] ;
},
dragStart : function(dfun,fn){
essayer{
si(!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;
si(fn){fn();}
this.cdom.attachEvent("onmousemove",Drag.tempDrag);
}
}attraper(e){
this.dragEnd();
}
},
glisser : fonction(){
essayer{
si(this.dragAble){
this.ex = event.screenX;
this.ey = event.screenY;
this.offsetX = this.ex - this.lx;
this.offsetY = this.ey - this.ly;
si(this.dragFun){this.dragFun();}
ceci.lx = ceci.ex;
ceci.ly = ceci.ey;
}
}
attraper(e){
this.dragEnd(null);
}
},
dragEnd : fonction(fn){
si(this.dragAble){
this.cdom.detachEvent("onmousemove",Drag.tempDrag);
this.cdom.releaseCapture();
this.ex = event.screenX;
this.ey = event.screenY;
this.dragAble = false;
si(fn){fn();}
}
this.releaseDrag();
},
releaseDrag : fonction(){
ceci.ex = 0 ;
ceci.ey = 0;
ceci.sx = 0 ;
ceci.sy = 0 ;
this.cdom = null ;
this.dragAble = false;
this.dragFun = null ;
this.cache = {};
}
} ;
fonction start(){
var d = Drag.cdom.cloneNode(true);
var pos = getBodyPos(Drag.cdom);
avec(d.style){
position="absolu";
gauche=pos.gauche;
top=pos.top;
filtre='Alpha(Opacity="30")' ;
}
Drag.putCache("alo",d);
document.body.appendChild(d);
}
fonction ing(){
var offx = Drag.offsetX;
var offy = Drag.offsetY;
var à = Drag.getCache("alo");
var l = to.offsetLeft;
var t = to.offsetTop;
avec (à.style){
gauche=l+offx;
top=t+offy;
}
}
fin de fonction(){
var cdom = Drag.cdom;
var alo = Drag.getCache("alo");
avec (cdom.style)
{
left=alo.offsetLeft;
top=alo.offsetTop;
position="absolu";
}
si (alo)
document.body.removeChild(alo);
}
fonction getBodyPos(obj){
essayer{
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 {gauche: l, haut: t} ;
}attraper(e){
alerte (e.message);
}
}
//-->
</SCRIPT>
</HEAD>
<CORPS>
<div style="border:solid 1 #7FFFD4;width:300;height:150;background:#3399FF;cursor:move;" onmousedown="Drag.dragStart(ing,start)" onmouseup="Drag.dragEnd(end)">
Tester l'objet glisser
</div>
</CORPS>
</HTML>
