Drag Drop limité avec images

j'essayais d'adapter le code pour placer des points sur une carte...

pour simplifier j'ai remplacer le div draggable par une image
curieusement ça n'a pas l'air de vouloir focntionner, mais je ne comprends pas pourquoi...
Je suis obliger de mettre l'image dans un div draggable :(
Quelqu'un pourrait me dire pourquoi ???

voici ce qui fonctionnne:
Code:

1 2 3 <div id="titi" style="width:433px;height:440px;border:1px solid #666; background:url('../GrY/Site/Carte.png') 0 0 no-repeat"> <div id="debug" style="position:absolute" class="Draggable" ><img src="../GrY/Site/BlueDot.gif" /></div>
et ce qui ne fonctionne pas
Code:

1 2 3 <div id="titi" style="width:433px;height:440px;border:1px solid #666; background:url('../GrY/Site/Carte.png') 0 0 no-repeat"> <img src="../GrY/Site/BlueDot.gif" id="debug" style="position:absolute" class="Draggable"/>

1 pièce(s) jointe(s)

voici une source qui devait servir a créer des tag sur une image , au final :

- une div ( dans la quelle tu peux mettre une image de background ;) )
- création de div avec redimensionnement dynamique

adaptation a faire :

- supprimer la fonctionne de redimenssionement de la div crée dynamiquement
- supprimer la fonction permettant de créer le input info

- créer une fonction qui t'ajoute un point ( image) a l'endroit clické

tu va voir que tout le code est déja prèt et simple a adapter

Oui ok bien ton truc merci
mais bon ça ne repond pas à ma question ... :(
pourquoi avec le code précédent ne peut on pas dragger une image alors que pour le div cela fonctionne, le script ne fait pourtant pas appel à des propriété du div qui ne sont pas applicables aux images

Le code complet largement insipiré du script de contribution:

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fiche Agence</title>
 
<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 = Drag.findPos(Drag.MyObj.MyObjToLimit)[0] ;
				Drag.MyObj.maxRight = Drag.MyObj.minLeft + Drag.MyObj.MyObjToLimit.offsetWidth ;
				Drag.MyObj.minTop = Drag.findPos(Drag.MyObj.MyObjToLimit)[1] ;
				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){
			//Déplacement de l'objet
			if(newPosX < (Drag.MyObj.minLeft)){
				Drag.MyObj.style.left = Drag.MyObj.minLeft + "px";
			}
			else if((newPosX + Drag.MyObj.offsetWidth) > (Drag.MyObj.maxRight)){
				Drag.MyObj.style.left = Drag.MyObj.maxRight - Drag.MyObj.offsetWidth  + "px";
			}
			else{
				Drag.MyObj.style.left = newPosX + 'px';
			}
 
 
			if(newPosY < (Drag.MyObj.minTop)){
				Drag.MyObj.style.top = Drag.MyObj.minTop + 'px';
			}
			else if((newPosY + Drag.MyObj.offsetHeight) > (Drag.MyObj.maxBottom)){
				Drag.MyObj.style.top = Drag.MyObj.maxBottom - Drag.MyObj.offsetHeight +"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:433px;height:440px;border:1px solid #666; background:url('../GrY/Site/Carte.png') 0 0 no-repeat">
<img  id="debug" style="position:absolute" class="Draggable" src="../GrY/Site/BlueDot.gif" />
</div>
 
<script type="text/javascript">
	Drag.init(document.getElementById('debug'),document.getElementById('titi'));
</script>
</body>
</html>

Heu désolé ...

Laissez tomber ... je ne sais pas pourquoi, j'ai du changer un truc par mégarde mais là ça fonctionne au poil !

Merci d'avoir perdu de votre temps :oops::oops:

:aie:

lol pas grave, mais je pense que le script que je t'ai donné pourra te servir ;)

Oui sans doute si mon pojet de portail intranet voit le jour ;)

Merci FIllot