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 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.Draggable{
border:1px solid #666;
background-color:#4C9294;
}
.inDrag{
border:2px dashed #ED3C12;
background-color:#4395BC;
}
</style>
<script type="text/javascript">
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 = "0px";
if (isNaN(parseInt(Drag.MyObj.style.top ))) Drag.MyObj.style.top = "0px";
//Si l'on doit limiter le déplacement a une zone on calcul les points
if(Drag.MyObj.MyObjToLimit){
Drag.MyObj.minLeft = 0;
Drag.MyObj.maxRight = Drag.MyObj.minLeft + Drag.MyObj.MyObjToLimit.offsetWidth ;
Drag.MyObj.minTop = 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('test').innerHTML =newPosX + " ecart : " + Drag.MyObj.ecartX + " position : " + curX;
//Déplacement de l'objet
if(newPosX < (Drag.MyObj.minLeft+5)){
Drag.MyObj.style.left = Drag.MyObj.minLeft+5 + "px";
}
else if((newPosX + Drag.MyObj.offsetWidth) > (Drag.MyObj.maxRight-5)){
Drag.MyObj.style.left = Drag.MyObj.maxRight - Drag.MyObj.offsetWidth - 5 + "px";
}
else{
Drag.MyObj.style.left = newPosX + 'px';
}
if(newPosY < (Drag.MyObj.minTop+5)){
Drag.MyObj.style.top = Drag.MyObj.minTop + 5 + 'px';
}
else if((newPosY + Drag.MyObj.offsetHeight) > (Drag.MyObj.maxBottom-5)){
Drag.MyObj.style.top = Drag.MyObj.maxBottom - Drag.MyObj.offsetHeight - 5 +"px";
}
else{
Drag.MyObj.style.top = newPosY + 'px';
}
}
//Sinon déplacement normalement
else{
Drag.MyObj.style.top = newPosY + 'px';
Drag.MyObj.style.left = newPosX + 'px';
}
return false;
},
end : function()
{
//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);
}
};
</script>
</head>
<body>
<div id="titi" style="width:500px;height:500px;border:1px solid #666">
<div id="debug" style="width:50px;height:50px;position:absolute" class="Draggable"> ici
</div>
</div>
<div id="test" style="width:200px;height:100px;position:absolute" class="Draggable">
</div>
<script type="text/javascript">
Drag.init(document.getElementById('debug'),document.getElementById('titi'));
Drag.init(document.getElementById('test'));
</script>
</body>
</html> |
Partager