Discussion :

[yohan0262]

Oui c'est une bonne idée. Il suffirait donc de mettre une condition "if" qui vérifie que le top et le left ne dépasse pas les dimensions prévues.

Etant donné que je vais devoir repasser par un script php qui va récupérer les valeurs des coordonnées pour les stocker en bdd, je pense que je peux effectuer la condition dans le script php. Ca donnerait quelque chose du genre :

Code :

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

1
2
3
4
5
6
7
 
if(p_posX < 480 && p_posY < 480){
     //alors on enregistre les coordonnées, requete etc...
}
else{
     //on ne fait rien
}

Edit :

Avant cela, il faut que je récupère les valeurs de mes variables Javascript pour les envoyer dans des variables php.

Je pense que je vais placer des boutons (enregistrer prévisions pour aujourd'hui, enregistrer prévisions pour demain etc.) qui appelleront chacun un script php, permettant de stocker les coordonnées dans la base :

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
 
<form id="form1" method="post" action="save.php">
	      <p>
 
	        <input type="submit" name="matin" id="saveJM" value="Pr&eacute;visions pour Jour J - Matin" />    
            <input type="submit" name="aprem" id="saveJA" value="Pr&eacute;visions pour Jour J - Apr&egrave;s-midi" />
            <input type="submit" name="matin1" id="save1M" value="Pr&eacute;visions pour J+1 - Matin" />
            <input type="submit" name="aprem1" id="save1A" value="Pr&eacute;visions pour J+1 - Apr&egrave;s-midi" />
	      </p>
	      <p>
	        <input type="submit" name="matin2" id="save2M" value="Pr&eacute;visions pour Jour J+2 - Matin" />
	        <input type="submit" name="aprem2" id="save2A" value="Pr&eacute;visions pour Jour J+2 - Apr&egrave;s-midi" />
            <input type="submit" name="matin3" id="save3M" value="Pr&eacute;visions pour Jour J+3 - Matin" />
            <input type="submit" name="matin3" id="save3A" value="Pr&eacute;visions pour Jour J+3 - Apr&egrave;s-midi" />
	      </p>
    </form>

Ces boutons lanceront donc un script php qui devrait contenir ceci :

Code :

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

1
2
3
4
5
6
7
8
 
$coordX = "<script language='Javascript'> document.write(p_posX); </script>";
 
echo "Les coordonnees X sont $coordX";
 
$coordY = "<script language='Javascript'> document.write(p_posY); </script>";
 
echo "Les coordonnees Y sont $coordY";

Mais comment effectue fait-on pour dire à Php qu'il faut qu'il la valeur de la variable d'une fonction particulière ? La question est difficile a poser j'espère que vous me comprendrez.

[gwyohm]

Oui c'est une bonne idée. Il suffirait donc de mettre une condition "if" qui vérifie que le top et le left ne dépasse pas les dimensions prévues.

Ou que tu les récupères dynamiquement... (tu connais l'id du div de destination, tu peux donc récupérer ses dimensions et sa position)

Etant donné que je vais devoir repasser par un script php qui va récupérer les valeurs des coordonnées pour les stocker en bdd, je pense que je peux effectuer la condition dans le script php.

C'est une idée, mais tu vas devoir soit envoyer les coordonnées et dimensions de ton div d'arrivée, soit hard-coder ses coordonnées...

Ca donnerait quelque chose du genre :

Code :

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

1
2
3
4
5
6
7
 
if(p_posX < 480 && p_posY < 480){
     //alors on enregistre les coordonnées, requete etc...
}
else{
     //on ne fait rien
}

je ne connais pas php, mais attention, on a travaillé sur la capacité à serialiser dans un champ unique les positions de toutes les divs. Pour ce, nous avons utiliser JSON (JavaScript Object Notation) qui a l'avantage d'être facile à manipuler en javascript. Cependant, il faut pouvoir travailler avec chaque div en php. Cherche donc une librairie json php qui t'aidera à manipuler notre JSON.

Ce qui nous amène au dernier point :

J'ai vu que la fonction :

Code :

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

window.location("script.php")

permettait d'appeler un script php. Néanmoins, comment fait-on pour récupérer (à partir d'un script php) la valeur d'une variable javascript ? Comment fait-on le lien ?

Non, non pas comme ça ! On a tout fait pour avoir l'ensemble des positions des divs dans un seul champ. On va donc rester dans le standard :

Code :

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

1
2
3
4
5
<form method="post" action="script.php" name="form1">
<input type="text" name="formtext1" id="positionDesDivs" value=""/>
<input type="submit"/>
</form>

Tu vas donc soumettre le formulaire et récupérer via $_POST ou quelque chose dans ce gout là la valeur de ton champ dans script.php.

C'est là que tu vas utiliser la libraire json pour PHP...

[yohan0262]

J'étais justement entrain de taper pendant que tu écrivais. Je pense que je vais placer des boutons (enregistrer prévisions pour aujourd'hui, enregistrer prévisions pour demain etc.) qui appelleront chacun un script php, permettant de stocker les coordonnées dans la base :

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
 
<form id="form1" method="post" action="save.php">
	      <p>
 
	        <input type="submit" name="matin" id="saveJM" value="Pr&eacute;visions pour Jour J - Matin" />    
            <input type="submit" name="aprem" id="saveJA" value="Pr&eacute;visions pour Jour J - Apr&egrave;s-midi" />
            <input type="submit" name="matin1" id="save1M" value="Pr&eacute;visions pour J+1 - Matin" />
            <input type="submit" name="aprem1" id="save1A" value="Pr&eacute;visions pour J+1 - Apr&egrave;s-midi" />
	      </p>
	      <p>
	        <input type="submit" name="matin2" id="save2M" value="Pr&eacute;visions pour Jour J+2 - Matin" />
	        <input type="submit" name="aprem2" id="save2A" value="Pr&eacute;visions pour Jour J+2 - Apr&egrave;s-midi" />
            <input type="submit" name="matin3" id="save3M" value="Pr&eacute;visions pour Jour J+3 - Matin" />
            <input type="submit" name="matin3" id="save3A" value="Pr&eacute;visions pour Jour J+3 - Apr&egrave;s-midi" />
	      </p>
    </form>

Ainsi, chaque boutons lancera un script qui lui sera particulier. On devrait aussi retrouver quelque chose de ce genre dans le script permettant de stocker les valeurs des variables Javascript, dans de nouvelles variables Php :

Code :

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

1
2
3
4
5
6
 
$coordX = "<script language='Javascript'> document.write(p_posX); </script>";
 
$coordY = "<script language='Javascript'> document.write(p_posY); </script>";
 
echo "Les coordonnees X et Y sont respectivement de : $coordX - $coordY";

Néanmoins, comment fait-on pour dire à Php qu'il faut qu'il récupère la valeur de telle variable, de telle fonction ? Car là, en l'occurence, il a beau vouloir récupérer la valeur des variables p_posX et p_posY, il ne sait pas où aller les chercher ???

La question est difficile a poser j'espère que vous me comprendrez.

PS : Ok pour la librairie JSON, je vais me renseigner.

[gwyohm]

Avant de multiplier les fonctions d'enregistrement, avançons dans l'ordre et commençons par récupérer les données.

Ainsi, chaque boutons lancera un script qui lui sera particulier. On devrait aussi retrouver quelque chose de ce genre dans le script permettant de stocker les valeurs des variables Javascript, dans de nouvelles variables Php :

Code :

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

1
2
3
4
5
6
 
$coordX = "<script language='Javascript'> document.write(p_posX); </script>";
 
$coordY = "<script language='Javascript'> document.write(p_posY); </script>";
 
echo "Les coordonnees X et Y sont respectivement de : $coordX - $coordY";

Non justement, en cliquant sur le bouton submit, tu vas poster un formulaire. Reprend l'exemple de mon précédent post et dans script.php, commence par faire

Code :

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

<?php echo $_POST['formtext1']; ?>

[yohan0262]

J'ai tendance à vouloir aller un peu trop vite par moment alors que j'ai encore beaucoup de chose à apprendre...

Je viens de tester le script suivant :

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
 
<?php 
 
        echo $_POST['formtext1'];
        $coord = $_POST['formtext1']; 
        
        if($coord =! NULL){
        // on récupère les coordonnées
        echo "$coord";
        }
        else{
        // on ne fait rien
        
        }
 
?>

echo $_POST['formtext1']; : Me retourne bien l'id, le left et le top.
echo "$coord"; : La variable est égale à 1, signe qu'elle n'est pas vide (du moins je l'ai compris comme ça)

En tout cas, je trouve que ça va être loin d'être facile pour la suite. Etant donné la chaine de caractères que je récupère, il va être difficile de récupérer seulement les données qui nous intéresse :

{peunuageux1:{left:292,top:244},tresnuageux1:{left:316,top:146}}

Comment procéder ? Concaténation ?

[gwyohm]

J'ai tendance à vouloir aller un peu trop vite par moment alors que j'ai encore beaucoup de chose à apprendre...

Ca montre au moins que tu es motivé

Je viens de tester le script suivant :

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
 
<?php 
 
        echo $_POST['formtext1'];
        $coord = $_POST['formtext1']; 
        
        if($coord =! NULL){
        // on récupère les coordonnées
        echo "$coord";
        }
        else{
        // on ne fait rien
        
        }
 
?>

echo $_POST['formtext1']; : Me retourne bien l'id, le left et le top.
echo "$coord"; : La variable est égale à 1, signe qu'elle n'est pas vide (du moins je l'ai compris comme ça)

Extra ! tu récupères bien tes données de ton champ caché, et sous un bon format. Après on dirait que en variabilsant avec $coord, php a deja interpreter, mais je ne m'avance pas, encore une fois moi PHP...

Maintenant à toi de voir à quelle vitesse tu souhaites avancer.
Option 1:
Tu stockes sans te poser de question la valeur telle que tu la recois dans un champ text de ta bdd.
Au moment de la restitution, tu feras un eval de cette valeur en javascript puis tu placeras tes objets en fonction. == le plus simple

Option 2:
Tu fais des vérifications côté serveur. Là, il faut la bibliothèque json ? pour php afin d'interpréter la fameuse chaine et pouvoir extraire pour chaque div son id, ses coordonnées, faire le controle et sauvegarder en base (... avec quel model ?). Bref, c'est aussi une autre histoire.

En tout cas, je trouve que ça va être loin d'être facile pour la suite. Etant donné la chaine de caractères que je récupère, il va être difficile de récupérer seulement les données qui nous intéresse :

{peunuageux1:{left:292,top:244},tresnuageux1:{left:316,top:146}}

Je sais pas pourquoi, je te vois partir sur l'option2...

Ne te décourage pas, avance par étape, teste regulierement... Avance un peu sur la librairie php json, ca va le faire

[yohan0262]

Je pense que je vais suivre l'option 1 qui a effectivement, l'air d'être plus simple. Je vais attaquer la partie php.

Je reviendrais certainement pour la troisième étape qui sera de restaurer les objets.

Je te remercie vraiment pour ton aide !

A bientôt !

[yohan0262]

Me revoici. Soit 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
25
26
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 les 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(",") + "}";	
 
}

La fonction javascript ci-dessus me permet de récupérer l'id, le left et le top d'un objet "dragué". La chaine de caractère retournée est de ce type :

Code :

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

1
2
 
{soleil1:{left:372,top:124},peunuageux1:{left:392,top:139},mitige1:{left:214,top:175},mitige2:{left:350,top:159}}

Néanmoins, j'aimerais que la chaine que je récupère soit exactement de la forme (chaîne JSON encodée) :

Code :

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

{"soleil1":{"left":372,"top":124},"peunuageux1":{"left":392,"top":139},"mitige1":{"left":214,"top":175},"mitige2":{"left":350,"top":159}}

Cela me permettra de pouvoir utiliser une fonction php nommée decode_json() qui se chargera d'identifier chaque objets.

[gwyohm]

Utilise \" pour échapper " dans une chaine ou bien écrit les chaines avec '

[yohan0262]

Utilise \" pour échapper " dans une chaine ou bien écrit les chaines avec '

Tout compte fait, j'ai pu utilisé la fonction json_decode( ) grâce à une autre fonction - preg_replace( ) - qui se charge de remplacer les caractères choisis par des guillemets.

Voici la fonction réalisé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
<?php 
 
	mysql_connect("localhost", "root", "");
	mysql_select_db("moduleprevis");
	$result = mysql_query("SELECT coord FROM coordonnees"); 		
 
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
   		printf("%s", $row["coord"]);
		$json = $row["coord"];
 		$json = preg_replace( '`(\w+)`' , '"$1"' , $json);
	}	
 
	$tab = json_decode($json,true);
 
	foreach ($tab as $temps => $pos) {
		echo "<h1>".$temps."</h1>";
		echo "<p>Left : ".$pos['left']."</p>";
		echo "<p>Top : ".$pos['top']."</p>";
}
?>

Maintenant que je récupère comme il le faut les données de ma base, en les assimilant à des variables php, quelles sont les démarches que vous me conseillez à partir de ce que j'ai déjà réalisé ?

Pour rappel : Le but final est de restituer les objets dont les id, position left et top sont stockées en base de données. Ces objets correspondent à des images (div source) que je souhaite afficher (en fonction de leur coordonnées) sur une autre image (div cible).

[gwyohm]

en php ou en javascript, tu définis le style de tes images avec les valeurs sauvegardées.
En javascript, à la fin de ta page ou mieux à l'événement load ca ferait quelque chose comme :

Code :

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

1
2
3
4
5
6
7
8
9
 
var allCoords = eval("(<?php echo $ccords?>)"); // en supposant que $coords contienne EXACTEMENT ce que nous envoyons dans le formulaire à PHP
for(var imageid in allCoords) {
  var coord = allCoords[imageid];
  var image = document.getElementById(imageid);
  image.style.display = "absolute";
  image.style.top = coord.top + "px";
  image.style.left = coord.left + "px";
}

[yohan0262]

Bon, j'ai testé quelque chose qui n'a pas fonctionné... Etant donné que je veux charger les objets sur une page différente de celle qui permet d'effectuer les drag, j'ai mis le code php et javascript dans la même page :

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
<body onload="load();">
 
<?php 
 
	mysql_connect("localhost", "root", "");
	mysql_select_db("moduleprevis");
	$result = mysql_query("SELECT coord FROM coordonnees"); 		
 
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
   		//printf("%s", $row["coord"]);
		$json = $row["coord"];
 		echo $json;		
	}		
?>
 
<script>	
function load(){
	var allCoords = eval("(<?php echo $json?>)"); 
 
	for(var imageid in allCoords) {
	  var coord = allCoords[imageid];
	  var image = document.getElementById(imageid);
	  image.style.display = "absolute";
	  image.style.top = coord.top + "px";
	  image.style.left = coord.left + "px";
	}
}
</script>

- J'appelle ma fonction "load()" grâce à l'événement <body onload=...>
- Dans la partie php, je récupère exactement tout ce que j'avais envoyé par le formulaire...

Néanmoins, rien ne se passe ce qui est d'un côté très normal puisque que le script ne connait pas les objets à afficher (vue qu'ils sont déclarer avec leur id, dans une autre page). Dois-je les appeler (méthode ?) ? Ou les insérer de nouveau ?

[yohan0262]

J'ai essayé de débugger en plaçant quelques div dont l'id était récupéré, mais rien ne se passe et les images restent à leur place.

J'ai beau chercher et me renseigner sur la fonction eval, je ne trouve pas où est le problème ?

[gwyohm]

Il faut que tes images aient le même id... au besoin, tu dois pouvoir les créer :
en fonction de l'id, je pense que tu peux facilement retrouver le chemin vers l'image...

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
 
var imagesPath = {
  "soleil" : "/img/meteo/soleil.gif",
  "peunuageux" : "/img/meteo/peunuageux.gif",
  // ...
  "mitige" : "/img/meteo/mitige.gif"
};
 
function getImageFromIdOrCreate(id) {
  var image = document.getElementById(id);
  if(! image) {
    var key = id.replace(/\d+$/, "");
    image = document.createElement("img");
    image.src =    imagesPath[key ] ;
    document.body.appendChild(image);
  }
  return image;
}
 
function load(){
	var allCoords = eval("(<?php echo $json?>)"); 
 
	for(var imageid in allCoords) {
	  var coord = allCoords[imageid];
	  var image = getImageFromIdOrCreate(imageid);
	  image.style.display = "absolute";
	  image.style.top = coord.top + "px";
	  image.style.left = coord.left + "px";
	}
}

[yohan0262]

En effet, il y a du plus avec cette methode. Les pictogrammes correspondant apparaissent bien dans la page mais ils ne s'affichent pas aux coordonnées qui leurs sont réservées... Je vais essayer de chercher d'où viens le problème.

Edit : J'ai placé deux alertes du genre :

Code :

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

1
2
alert("coord top :" + coord.top);
alert("coord left :" + coord.left);

Je reçois bien 8 alertes (4 objets), comprenant les coordonnées de chaque objets. Celles-ci sont donc bien récupérées et stockées dans la variable qui leur correspond, mais rien n'y fait, l'affichage ne les prend pas compte...

Ces lignes de code sont pourtant bien exactes :

Code :

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

1
2
image.style.top = coord.top + "px";
image.style.left = coord.left + "px";

[gwyohm]

Code :

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

image.style.position= "absolute";

[yohan0262]

Code :

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

image.style.position= "absolute";

Bien vue gwyohm !

Les objets sont restituées comme il le faut !

Dernières petites choses avant que je déclare ce sujet comme résolu...

Je voudrais que les objets soient restitués sur une image (div). Néanmoins, cette image ne se situera pas à en haut à gauche de la page web. Il faudra donc que la numérotation des coordonnées se fasse à partir du coin haut gauche de cette image (coordonnées (0;0) en haut à gauche de l'image).

Ainsi, existe-t'il une fonction qui permette d'effectuer cela ? Je vais me renseigner de mon côté mais on ne sait jamais si quelqu'un a déjà eu à faire à ce genre de "problème"...

[gwyohm]

Le mieux serait qu'au moment du drag drop tu stockes les coordonnées par rapport à ta div de destination.
Ensuite en restitution, ta div qui accueille les images doit etre en position:relative, puis au lieu d'ajouter tes images au body, tu ajoutes tes images à la div.

[yohan0262]

Le mieux serait qu'au moment du drag drop tu stockes les coordonnées par rapport à ta div de destination.
Ensuite en restitution, ta div qui accueille les images doit etre en position:relative, puis au lieu d'ajouter tes images au body, tu ajoutes tes images à la div.

Lorsque j'effectue le drag drop, l'image de destination est située en haut à gauche de la page web. Donc si je comprend bien, il me suffit d'appeler la fonction load(); dans la div et le tour devrait être joué. (étant donné que les coordonnées en haut de l'image sont bien de (0;0) sur la page de départ.

Edit : Je viens de tester... Les objets ne sont pas restitués...

Code :

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

1
2
3
4
5
6
7
#tobackground{
	background-image:url(picto/france.png);
	width: 480px;
	height: 480px;
	position:relative;
	border: 1px solid #ddd;
}

Code :

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

<div id="tobackground" onload="load();">  </div>

[gwyohm]

non

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
<head>
<style type="text/css">
#tobackground{
	background-image:url(picto/france.png);
	width: 480px;
	height: 480px;
	position:relative;
	border: 1px solid #ddd;
}
<script type="text/javascript">
// du code
function getImageFromIdOrCreate(id) {
  var image = document.getElementById(id);
  if(! image) {
    var key = id.replace(/\d+$/, "");
    image = document.createElement("img");
    image.src =    imagesPath[key ] ;
    document.getElementById("tobackground").appendChild(image);
  }
// du coide
</script>
</style>
</head>
<body onload="load();">
<!--
du code
-->
<div id="tobackground" >  </div>
<!--
du code
-->