Bonjour,

Mon poste va certainement sembler b�te mais je bloque. Je vais attaquer une formation longue pour devenir d�veloppeur web et je me forme tout seul en amont de cette formation sur les technologie javascript et php. Pour ce faire je me fixe des exercices et j'essaye de les r�aliser, la pratique me convenant mieux que de la th�orie. Cela a pour objectif de m'apprendre � utiliser le mdn ainsi que les m�thod essentiels. Je reste sur du javascript pure et n'utilise pas encore la biblioth�que Jquey car j'estime qu'avant de prendre des raccourci il faut d'abord connaitre le chemin. A tord ou � raison j'ai chois cette m�thode qui me convient bien pour l'instant

Je me suis donc lanc� dans le drag and drop. Jusque la pas de probl�me mais j'arrive au moment ou je souhaite que mon utilisateur puisse sauvegarder et retrouv� sa page tel qu'il l'avais mod�lis�. Je ne vais pas cracher tout mon code car j'ai plut�t besoin d'explication pour clarifier ce que je ne comprends pas et qui me bloque.

Voila j'ai deux bloc, une div "dragzone" et une div "dropzone" Dans le div dragzone j'ai un bloc que j'ai nomm� dossier :
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
<div id = "dragzone">
 
        <div  id = "0" class = "src_file" name = "" value ="" draggable="true" ondragstart="glisser(this,event)">
              <p>fichier</p>
        </div>
</div>

Dans le bloc dropzone j'ai 30 bloc qui serve de r�ceptacle de drop :
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
 <div id = "dropzone" draggable="false">
        <div id = "1" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "2" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
         ......
</div>

A chaque fois que je drag une div fichier dans un bloc drop �a me cr�e un clone de ce fichier avec un nouvel id incr�ementer. Donc le premier fichier s'appelera div 1, le deuxieme div 2 etc...

De plus j'ai cr�e un objet et a chaque fois que je d�pose un clone je cr�e un nouveau objet avec "CreateObject"
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
var objets = {
type : '',
id : '',
emplacement : '',
name : '',
value : ''    
}
 
function deposer(objet, event) {
    if (objet.className == 'empty'){
 
        if (t.className == 'src_file'){
            objet.appendChild(t);
            t.className = 'droppedfile'
            var zonefile = document.getElementById('dropzone').querySelectorAll('.droppedfile')
            var l_zonefile = zonefile.length
            t.id = l_zonefile
 
            ///// Je crée un nouvel objet //////
            var dossier = Object.create(objets)
            dossier.type = "Dossier"
            dossier.id = t.id
            dossier.emplacement = objet.id
 
            /////// je rajoute l'objet crée dans un tableau ainsi que l'id de cette object////////////
 
            arrayFile.push(dossier)
            arrayFile.push(dossier.id)
 
            // C'est la méthode que j'ai trouvé pour récupérer les élément de l'objet grâce à l'id car 
// si je crée plusieurs objets et même si ils n'ont pas les même propriétés le console.log me marque 
// arrayfile{Object, Object, etc...} du coup avec cette méthode je peux retrouver mon objet grâce à l'id 
// puisque dans le tableau j'ai arrayfile{Object, 1, Object, 2), je n'ai qu'a recherché l'id de l'object - 1 
// pour récuperer toutes les propriété de l'objet. J'imagine que c'est un peu sale et une petite astuce ne 
// serait pas de refus pour rendre cela un peu plus simple :)
 
            var e = arrayFile.indexOf(t.id)
                if (e != -1){
                arrayFile[e-1].emplacement = objet.id
                console.log(arrayFile[e-1])
                }
Donc voila je me retrouve au final avec des object avec des propri�t� qui corepondent � :

type : dossier
id : id de l'objet correspond a � l'id de la div fichier dans le DOM
emplacement : id de la div ou est stock� mon fichier dans le DOM
name : l'attribut nom de l'objet
value: la valeur de l'objet.

Voila j�esp�re m��tre bien exprim� et que vous avez compris dans l'ensemble mon projet.

Donc maintenant j'en viens � mon probl�me. Par quel biais stocker les informations des mes objets et comment les r�cup�rer. L'id�e c'est que l'utilisateur, une fois son interface cr��e appuis sur un bouton, et que les donn�es soient stock�s dans une base SQL. Mais comme mes objects sont g�n�r� dynamiquement je n'ai pas de fichier ou j'ai objet1{], objet2{} etc, il n'y a que la console qui me montre les info et je ne sais pas comment les r�cup�rer.

En gros si l'utilisateur a un truc du genre dans son DOM
Code html : 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
<div id = "dropzone" draggable="false">
        <div id = "1" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "2" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
               <div id="1" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
                <div id="2" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "4" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "5" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
                <div id="3" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "6" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
</div>

Mon code Javascript va g�n�r� dans la console un tableau : Array [ Object, "1", Object, "2", Object, "3" ]

Avec pour Array[0] :
type : dossier,
id : 1,
emplacement : 2,
name : '',
value : ''
}
et ainsi de suite pour l'objet 2 et 3

Comment je peux faire pour enregistrer ses informations, les stock�s et faire en sorte que l'utilisateur r�cup�re le DOM tel qu'il l'a laiss�?

J'espere avoir �t� clair dans mes explications, j'ai vraiment besoin d'un coup de main, comme vous le voyez j'ai pas mal bosser dessus, ce n'est pas par faignantise j'ai juste du mal avec certains concept, la meilleur m�thode � employ�, la cr�ation d'un fichier Json en fonction de donn�es dynamique, la relation avec la requ�te AJAX ET PHP et la r�cup�ration de donn�e. J'aimerais bien clarifier tout �a dans ma t�te pour pouvoir avanc�.

Merci beaucoup d'avance