Discussion :

[yohan0262]

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]

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

[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 ...

[yohan0262]

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 ?

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]

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

[yohan0262]

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]

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>