Discussion :

[brazilia28]

Bonjour à tous,

J'ai utilisé un framework pour pouvoir drag'n dropper les DIV de mon site, donc le drag'n drop fonctionne très bien. Je peux déplacer mes DIV comme je le souhaite sur toute l'étendue de ma page.Mais bien entendu, lorsque je rafraichis ma page, mes DIV reviennent à leur emplacement d'origine.

Les positions de chacun des DIV par rapport à leur DIV parent sont stockées dans une base de données. Donc ce que j'aimerai faire, c'est de remplacer les anciennes positions des DIV par les nouvelles, après les avoir déplacer par drag'n drop.

Je pense pouvoir faire cela en Javascript, mais je ne sais pas du tout comment m'y prendre. Pouvez-vous m'aider s'il vous plait ?

Je vous remercie beaucoup

Ben

[Madfrix]

Bonjour

A ma connaissance cela n'est pas possible en Javascript car c'est un langage qui n'interfère pas avec les bases de données.

A+

[brazilia28]

En fait, j'interagis avec ma base de données grâce à des fonctions Ajax, donc il m'est possible d'envoyer des valeurs à stocker dans la base de données (4D pour infos) et également d'en récupérer.

[bigboomshakala]

En fait, j'interagis avec ma base de données grâce à des fonctions Ajax, donc il m'est possible d'envoyer des valeurs à stocker dans la base de données (4D pour infos) et également d'en récupérer.

avec Ajax justement
à la fin du drag (au drop quoi), tu envoies une requête d'update avec la nouvelle position du div

[brazilia28]

Ok sur ce point, mais comment récupérer la nouvelle position du DIV ?

[bigboomshakala]

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
function getPos(o)
{
	try
	{
		var x = y = 0;
		if (o.offsetParent)
		{
			x = o.offsetLeft;
			y = o.offsetTop;
			while (o = o.offsetParent)
			{
				x += o.offsetLeft;
				y += o.offsetTop;
			}
		}
		return [x,y];
	}
	catch(ex){ window.status = 'function getPos exception : ' + ex.name + ' - ' + ex.message; return [-1,-1];}
}

[brazilia28]

euhhhh, pourrais-je avoir un petit peu d'explications sur cette fonction car je suis novice en Javascript.

Le paramètre o correspond à quoi ?
Cette fonction marche-t-elle avec tous les navigateurs ?

Merci

[bigboomshakala]

o = un objet html quelconque (div, label, table...)
oui

explications :
la fonction renvoie le tableau [x,y] qui donne les coordonnées de l'objet

Code :

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

1
2
3
var pos = getPos(maDiv);
// pos[0] -> abscisse
// pos[1] -> ordonnée

la fonction boucle sur l'objet et ses (offset)Parents et additionne leurs positions relatives, c-a-d qu'à la position de l'objet par rapport à son parent, on ajoute la position du parent par rapport au grand-parent, etc, jusqu'à la fenetre qui sert de référence. au final tu as la position de l'objet dans la fenetre en pixels.

[brazilia28]

Ca fonctionne à peu près comme je le veux, mise à part le fait que lorsque je redimensionne mon navigateur, les objets sortent de mon site. Normal vu que les positions sont absolues.

Je vais faire un calcul des coordonnées en pourcentage par rapport à la largeur et la hauteur du navigateur, et je pense que ça fonctionnera correctement.

Merci beaucoup