1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
| var Drag = {
MyObj : null,
MyObjToLimit : null,
init : function(o,MyObjToLimit)
{
Drag.MyObj = o ;
//Sauvegarde de la classe d'origine de l'objet
Drag.MyObj.MyClassName = o.className;
//On vérifit si l'objet est limité a un autre objet
Drag.MyObj.MyObjToLimit = (MyObjToLimit != null) ? MyObjToLimit:null;
//On assigne la méthode au click de la souris sur l'MyObjet
Drag.MyObj.onmousedown = Drag.start;
//Si l'élément n'as pas de propriété let et top on lui en assigne par défault
if (isNaN(parseInt(Drag.MyObj.style.left ))) Drag.MyObj.style.left = Drag.MyObj.MyObjToLimit.offsetLeft +"px";
if (isNaN(parseInt(Drag.MyObj.style.top ))) Drag.MyObj.style.top = Drag.MyObj.MyObjToLimit.offsetTop +"px";
//Si l'on doit limiter le déplacement a une zone on calcul les points
if(Drag.MyObj.MyObjToLimit){
Drag.MyObj.minLeft = 0//this.findPos(Drag.MyObj.MyObjToLimit)[0]; // 0;
Drag.MyObj.maxRight = Drag.MyObj.minLeft + Drag.MyObj.MyObjToLimit.offsetWidth ;
Drag.MyObj.minTop = 0//this.findPos(Drag.MyObj.MyObjToLimit)[1];//0;
Drag.MyObj.maxBottom = Drag.MyObj.minTop+Drag.MyObj.MyObjToLimit.offsetHeight;
}
},
start : function(e)
{
Drag.MyObj = this;
//On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
e = Drag.GetEvent(e);
//On affecte la classe InDrag
Drag.MyObj.className = "inDrag";
//On récupère l'endroit ou se trouve la souris par rapport a l'objet clické
Drag.MyObj.ecartX = e.clientX - parseInt(Drag.MyObj.style.left);
Drag.MyObj.ecartY = e.clientY - parseInt(Drag.MyObj.style.top);
//On affecte les méthodes drag et end au évènement lié au document et non a l'MyObjet
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
//On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
e = Drag.GetEvent(e);
//Récupération de la position de la souris
var curX = e.clientX;
var curY = e.clientY;
var newPosX = curX - Drag.MyObj.ecartX;
var newPosY = curY - Drag.MyObj.ecartY;
//Si l'élément les limités a un conteneur
if(Drag.MyObj.MyObjToLimit != null){
//document.getElementById('frontiere').innerHTML =newPosX + " ecart : " + Drag.MyObj.ecartX + " position : " + curX;
//Déplacement de l'objet
if(newPosX < (Drag.MyObj.minLeft)){
newPosX = Drag.MyObj.minLeft;
}
else if((newPosX + Drag.MyObj.offsetWidth) > (Drag.MyObj.maxRight)){
newPosX = Drag.MyObj.maxRight - Drag.MyObj.offsetWidth ;
}
else{
newPosX= newPosX ;
}
Drag.MyObj.style.left= newPosX +'px';
document.getElementById('posX').value=newPosX//;-Drag.MyObj.MyObjToLimit.offsetLeft;
if(newPosY < (Drag.MyObj.minTop)){
newPosY = Drag.MyObj.minTop ;
}
else if((newPosY + Drag.MyObj.offsetHeight) > (Drag.MyObj.maxBottom)){
newPosY = Drag.MyObj.maxBottom - Drag.MyObj.offsetHeight ;
}
else{
newPosY = newPosY ;
}
Drag.MyObj.style.top= newPosY +'px';
document.getElementById('posY').value=newPosY;//-Drag.MyObj.MyObjToLimit.offsetTop;
}
//Sinon déplacement normalement
else{
Drag.MyObj.style.top = newPosX + 'px';
Drag.MyObj.style.left = newPosY + 'px';
}
return false;
},
end : function()
{ //on mets les valeurs dasn les inputs
//On remet la classe de l'objet
Drag.MyObj.className = Drag.MyObj.MyClassName;
//On supprime les évènements liés au déplacement :)
document.onmousemove = null;
document.onmouseup = null;
//On détruit l'MyObjet
Drag.MyObj = null;
},
GetEvent : function(e)
{
if (!e) e = window.event;
return e;
},
findPos : function(obj){
//position x / y de l'objet
var x = obj.offsetLeft || 0;
var y = obj.offsetTop || 0;
//tant qu'il y a un parent, on ajoute la position de son parent
while (obj = obj.offsetParent) {
x += obj.offsetLeft
y += obj.offsetTop
}
//Ici on retour x ou y ( ou les deux dans un tableau ou un hash
return new Array(x,y);
}
}; |
Partager