Coordonnées X et Y d'une image (div)

**yohan0262** · 26/10/2009, 20h15

Bonjour,

Webmaster pour un site amateur, j'ai réalisé une interface web en javascript permettant de "draguer" des div (source) vers une autre div (cible). (glisser/déposer = drag'ndrop)

Je n'ai utilisé aucune librairies type JQuery, Prototype... uniquement le Javascript.

Ce que je souhaiterais, c'est créer un bouton "enregistrer position" permettant de sauvegarder en bdd les coordonnées des objets "dragués" (uniquement s'ils sont positionnés sur la div cible). Ce bouton serait associé à une fonction save qui se chargerait d'effectuer la tâche.

Voici le code actuel de ma page permettant uniquement de draguer les objets/images sources vers l'image cible :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
var isDragging = false;
var objectToDrag;
var obj;
var ecartX;
var ecartY;
var curX;
var curY;
 
function positionne(p_id, p_posX, p_pos_Y){
	document.getElementById(p_id).style.left = p_posX;
	document.getElementById(p_id).style.top = p_pos_Y;
}
 
function getPositionCurseur(e){
	//ie
	if(document.all){
		curX = event.clientX;
		curY = event.clientY;
	}
 
	//netscape 4
	if(document.layers){
		curX = e.pageX;
		curY = e.pageY;
	}
 
	//mozilla
	if(document.getElementById){
		curX = e.clientX;
		curY = e.clientY;
	}
}
 
function beginDrag(p_obj,e){
	isDragging = true;
	objectToDrag = p_obj;
	getPositionCurseur(e);
	ecartX = curX - parseInt(objectToDrag.style.left);
	ecartY = curY - parseInt(objectToDrag.style.top);
}
 
function drag(e){
	var newPosX;
	var newPosY;
	if(isDragging == true){
 
		getPositionCurseur(e);
		newPosX = curX - ecartX;
		newPosY = curY - ecartY;
 
		objectToDrag.style.left = newPosX + 'px';
		objectToDrag.style.top = newPosY + 'px';		
	}
 
}
 
function endDrag(){
	isDragging = false;
}

En espérant que quelques personnes puissent m'aider...

**Matthieu2000** · 27/10/2009, 10h09

un bouton de type submit! le reste se fait côté serveur

**SpaceFrog** · 27/10/2009, 10h37

A noter qu'avec un bouton type image le clic sur l'image envoie les positions x et y par rapport à l'origine haut gauche de l'image ...

**yohan0262** · 27/10/2009, 10h59

Envoyé par Matthieu2000

un bouton de type submit! le reste se fait côté serveur

Oui je savais bien qu'il me fallait un bouton de type submit qui appel une fonction, qui elle-même, appel un script php pour effectuer les requêtes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" value="Enregistrer" onclick="save(???)" />

C'est au niveau de l'alliance Javascript/Php que je galère un peu plus. J'ai essayé de réaliser une fonction save qui se chargera de récupérer la position des objets, seulement s'ils sont positionnées sur l'image cible. (il faut également que la numérotation des coordonnées ne se fassent que sur l'image, je ne sais pas si cela est possible ???)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
save(element){
var PosX;
var PosY;
 
if (objet est sur limage){
      // alors on récupère les coordonnées X et Y;
      //on appel et on se dirige vers le fichier php qui effectuera la requête vers la bdd
window.location("traitement.php");
 
}
else{
      // sinon on fait rien
}
}

Quelqu'un pourrait-il m'aider à réaliser cette petite fonction ?

Envoyé par SpaceFrog

A noter qu'avec un bouton type image le clic sur l'image envoie les positions x et y par rapport à l'origine haut gauche de l'image ...

D'accord mais malheureusement dans mon cas, ce serait plutôt l'inverse. C'est au moment que l'utilisateur lâche sa souris (et donc l'objet une foie "dragué") que j'aimerais récupérer les coordonnées. De plus, j'aimerais que les cordonnées (0;0) se situe en haut à gauche de ma div cible et non pas de ma page internet...

**SpaceFrog** · 27/10/2009, 11h06

je me suis mal exprime 0,0 = haut gauche de l'image pas de la page ...

**yohan0262** · 27/10/2009, 11h36

Envoyé par SpaceFrog

je me suis mal exprime 0,0 = haut gauche de l'image pas de la page ...

Ok SpaceFrog ! Ca pourrait donc être intéressant. Est ce que ce genre de bouton permet de récupérer les coordonnées des objets présents sur l'image concerné (image cible = arrière plan), pour les stocker dans des variables ?

**gwyohm** · 27/10/2009, 11h40

Le problème de yohan0262 est plus de sauvegarder les positions des divs déplacées non ?

Il y a bien besoin de javascript.

Un champ caché que tu remplis à la mode JSON avec par exemple l'id du div, ses coordonnées au moment du drop...

Je ne sais pas trop où dans ton code, mais qqch comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<input type="hidden" id="positionDesDivs" value=""/>
 
<script type="text/javascript">
//...
// quelque part dans ton code
var obj = eval("(" + (document.getElementById("positionDesDivs").value || "{}") +  ")");
obj[p_id]= {};
obj[p_id].top = p_posY;
obj[p_id].left = p_posX;
 
var items = [];
for(divid in obj) {
  var divObj = obj[divid];
  items.push(divid + ":" + "{left:" + divObj.left +",top:" + divObj.top+ "}");
}
document.getElementById("positionDesDivs").value = "{" + items.join(",") + "}";
 
</script>

**SpaceFrog** · 27/10/2009, 11h41

ça je ne le pense pas ...

J'ai fait un script qui me permet à mes admins de sites de placer des agences sur une carte et de sauver le tout dans mes tables ..

par exemple ici :
http://www.litt.fr/agences.php
les agences sont placés dans le back office en dragdrop sur une cartre

**yohan0262** · 27/10/2009, 11h50

Envoyé par gwyohm

Le problème de yohan0262 est plus de sauvegarder les positions des divs déplacées non ?

Il y a bien besoin de javascript.

Oui tout à fait !

Un champ caché que tu remplis à la mode JSON avec par exemple l'id du div, ses coordonnées au moment du drop...

Je ne sais pas trop où dans ton code, mais qqch comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<input type="hidden" id="positionDesDivs" value=""/>
 
<script type="text/javascript">
//...
// quelque part dans ton code
var obj = eval("(" + (document.getElementById("positionDesDivs").value || "{}") +  ")");
obj[p_id]= {};
obj[p_id].top = p_posY;
obj[p_id].left = p_posX;
 
var items = [];
for(divid in obj) {
  var divObj = obj[divid];
  items.push(divid + ":" + "{left:" + divObj.left +",top:" + divObj.top+ "}");
}
document.getElementById("positionDesDivs").value = "{" + items.join(",") + "}";
 
</script>

Ca a l'air de ressembler un peu à ce que je recherche, en effet, mais est ce que tu pourrais détailler d'avantages ?

En faite, une foie que l'utilisateur a effectuer les déplacements qu'il souhaitais, je veux que les coordonnées des image (div source) soient sauvegardées en bdd. Pour ce faire, je compte créer un bouton "enregistrer position" qui se charge d'effectuer cela, en sachant qu'on ne récupère que les coordonnées des pictogrammes présents sur la div cible (carte de la France).

**gwyohm** · 27/10/2009, 12h01

L'idée, c'est qu'au moment où l'utilisateur arrête de déplacer un div, tu sauvegardes sa position dans un champ caché. Comme tu ne sais pas combien il va y avoir de div, on stocke tout dans un seul dans un format qui est facile à utiliser pour javascript : JSON.

Admettons qu'à un moment donné, on ai la div d'ID DIV1 en x:10 et y:50, la div d'ID DIV2 en x:30 et y:20.
On aura dans notre champ caché :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
{
  DIV1: {
    left:50,
    top:10
  },
  DIV2: {
    left:30,
    top:20
  }
}

Mon code (non testé) commenté...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
// on se trouve au moment ou on lache le bouton de la souris après un drag.
// on a p_id, l'id du div déplacé, p_posX la position en X du div et p_posy la position en y
// on evalue le contenu du champ de sauvegarde pour avoir un objet
var obj = eval("(" + (document.getElementById("positionDesDivs").value || "{}") +  ")");
// ... ainsi si la div etait deja presente, on remplace son ancienne valeur, sinon on la créé
// on  créé ou initialise
obj[p_id]= {};
// on stocke son top (Y)
obj[p_id].top = p_posY;
// on stocke son left (X)
obj[p_id].left = p_posX;
 
// On va tout re-serialiser
var items = [];
// pour chaque id de div dans l'objet
for(divid in obj) {
  // on recupere l'es propriétés (le top et left)
  var divObj = obj[divid];
  // on serialise le div en question
  items.push(divid + ":" + "{left:" + divObj.left +",top:" + divObj.top+ "}");
}
// on met tout dans le champ caché
document.getElementById("positionDesDivs").value = "{" + items.join(",") + "}";

Essaye avec un champ type text au début pour voir ce qu'il se passe...

**yohan0262** · 27/10/2009, 12h13

Merci pour ces explications !

Voici le code de mes div source :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="tomove" onmousedown="beginDrag(this,event);" onmousemove="drag(event);" onmouseup="endDrag();">

Ainsi, je pense que la section de code que vous m'avez fournis doit être insérer dans la fonction endDrag(), puisqu'elle est appelé lorsque la souris est relâchée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function endDrag(){		
	isDragging = false;	
	// on se trouve au moment ou on lache le bouton de la souris après un drag.
 
	// on a p_id, l'id du div déplacé, p_posX la position en X du div et p_posy la position en y
 
	// on evalue le contenu du champ de sauvegarde pour avoir un objet
 
	var obj = eval("(" + (document.getElementById("positionDesDivs").value || "{}") +  ")");
	// ... ainsi si la div etait deja presente, on remplace son ancienne valeur, sinon on la créé
	// on  créé ou initialise
	obj[p_id]= {};
	// on stocke son top (Y)
	obj[p_id].top = p_posY;
	// on stocke son left (X)
	obj[p_id].left = p_posX;
 
	// On va tout re-serialiser
	var items = [];
	// pour chaque id de div dans l'objet
	for(divid in obj) {
	  // on recupere l'es propriétés (le top et left)
	  var divObj = obj[divid];
	  // on serialise le div en question
	  items.push(divid + ":" + "{left:" + divObj.left +",top:" + divObj.top+ "}");
	}
	// on met tout dans le champ caché
	document.getElementById("positionDesDivs").value = "{" + items.join(",") + "}";
 
 
}

**gwyohm** · 27/10/2009, 12h21

oui, sauf qu'on n'a pas p_id, p_posX et p_posY dans la signature donnée...

**yohan0262** · 27/10/2009, 12h31

Envoyé par gwyohm

oui, sauf qu'on n'a pas p_id, p_posX et p_posY dans la signature donnée...

Désolé d'être si ignare mais qu'est ce que cela signifie : signature donnée ?

**gwyohm** · 27/10/2009, 12h37

La signature que tu as donné...

Dans ta fonction endDrag, il n'y a pas p_id, p_posX, p_posY, je ne doute pas que tu pourras les intégrer facilement, mais pour l'instant, tu ne les a pas...

**yohan0262** · 27/10/2009, 12h49

Envoyé par gwyohm

La signature que tu as donné...

Dans ta fonction endDrag, il n'y a pas p_id, p_posX, p_posY, je ne doute pas que tu pourras les intégrer facilement, mais pour l'instant, tu ne les a pas...

Ok, cela reviens en quelque sorte à déclarer ces variables ?

Sinon pour afficher les valeurs dans un champ texte, j'ai essayé cette syntaxe mais je ne suis pas certain qu'elle soit correcte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("positionDesDivs").form1.formtext1.value = "{" + items.join(",") + "}";

**gwyohm** · 27/10/2009, 13h12

Envoyé par yohan0262

Ok, cela reviens en quelque sorte à déclarer ces variables ?

Oui, mais les valeurs sont importantes... il faut que tu soit dans le meme cas que ta fonction de positionnement... retrouver l'id, la position en x et celle en y.

Envoyé par yohan0262

Sinon pour afficher les valeurs dans un champ texte, j'ai essayé cette syntaxe mais je ne suis pas certain qu'elle soit correcte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("positionDesDivs").form1.formtext1.value = "{" + items.join(",") + "}";

Elle n'est pas correcte...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<form name="form1">
<input type="text" name="formtext1" id="positionDesDivs" value=""/>
</form>
<script type="text/javascript">
document.getElementById("positionDesDivs").value = //...
// OU
document.forms["form1"].elements["formtext1"].value = //...
</script>

**yohan0262** · 27/10/2009, 14h02

Encore merci pour votre patience et votre attention !

J'ai essayé la fonction suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
function endDrag(p_id, p_posX, p_posY){		
	isDragging = false;	
 
	var obj = eval("(" + (document.getElementById("positionDesDivs").value || "{}") +  ")");
 
	obj[p_id]= {};
	obj[p_id].top = p_posY;	
	obj[p_id].left = p_posX;	
 
	var items = [];
 
	for(divid in obj) {
	  // on recupere l'es propriétés (le top et left)
	  var divObj = obj[divid];
 
	  // on serialise le div en question
	  items.push(divid + ":" + "{left:" + divObj.left +",top:" + divObj.top+ "}");
	}
 
	document.forms["form1"].elements["formtext1"].value = "{" + items.join(",") + "}";
 
 
}

Néanmoins, je ne récupère pas les valeurs. Voici le message renvoyé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{undefined:{left:undefined,top:undefined}}

**gwyohm** · 27/10/2009, 14h21

Essaye comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function endDrag(){		
        var p_id = objectToDrag.id;
        var p_posX = curX;
        var p_posY = curY;
 
	isDragging = false;	
 
	var obj = eval("(" + (document.getElementById("positionDesDivs").value || "{}") +  ")");
 
	obj[p_id]= {};
	obj[p_id].top = p_posY;	
	obj[p_id].left = p_posX;	
 
	var items = [];
 
	for(divid in obj) {
	  // on recupere l'es propriétés (le top et left)
	  var divObj = obj[divid];
 
	  // on serialise le div en question
	  items.push(divid + ":" + "{left:" + divObj.left +",top:" + divObj.top+ "}");
	}
 
	document.forms["form1"].elements["formtext1"].value = "{" + items.join(",") + "}";
 
 
}

**yohan0262** · 27/10/2009, 15h38

Je te remercie gwyohm, ça fonctionne nickel !

Le script récupère bien les coordonnées comme il le faut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{tomove:{left:442,top:218}}

Néanmoins encore une chose, existe-il un moyen de récupérer les coordonnées sur une div particulière ? (dans le sens où on ne récupère pas les coordonnées si l'objet n'est pas sur la div cible)

Je pense qu'il faut imposer une condition mais laquelle ?