Discussion :

[nicdodo]

Bonjour, Je viens vers vous car j'ai un petit soucis avec la création d'un objet Json.

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
 
function enregistrer() {
 
var json
var dom = document.getElementById('dropzone').children
 
//if (dom[0].className == 'full'){
 
var DOM = []
 
    if (dom[0].className == 'full'){
    objet = {
        id : dom[0].firstChild.id, 
        class : dom[0].firstChild.className ,
        place : dom[0].firstChild.getAttribute('place') ,
        name : dom[0].firstChild.getAttribute('name') ,
        value : dom[0].firstChild.getAttribute('value') ,
        draggable : dom[0].firstChild.getAttribute('draggable'), 
        ondragstart : dom[0].firstChild.getAttribute('ondragstart')    
    }
    DOM.push(objet)
    }
    if (dom[1].className == 'full'){
    objet = {
        id : dom[1].firstChild.id, 
        class : dom[1].firstChild.className ,
        place : dom[1].firstChild.getAttribute('place') ,
        name : dom[1].firstChild.getAttribute('name') ,
        value : dom[1].firstChild.getAttribute('value') ,
        draggable : dom[1].firstChild.getAttribute('draggable'), 
        ondragstart : dom[1].firstChild.getAttribute('ondragstart')
    }
    DOM.push(objet)
    }
 
    if (dom[2].className == 'full'){
    objet = {
        id : dom[2].firstChild.id, 
        class : dom[2].firstChild.className ,
        place : dom[2].firstChild.getAttribute('place') ,
        name : dom[2].firstChild.getAttribute('name') ,
        value : dom[2].firstChild.getAttribute('value') ,
        draggable : dom[2].firstChild.getAttribute('draggable'), 
        ondragstart : dom[2].firstChild.getAttribute('ondragstart')
    }
    DOM.push(objet)
    }
 
json = JSON.stringify(DOM)
 
 
$.post("./php/sauvegarde.php",
        {
                result : json
 
        })
    }

Cela fonctionne, le problème c'est que ça va jusqu’à dom[29] du coup c'est un peu lourd et je suis sur que je peux factoriser ça mais je ne sais pas comment. J'ai essayé un truc comme ça

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
for (var i = 0 ; i < 29 ; i++)
if (dom[i].className == 'full'){
    objet = {
        id : dom[i].firstChild.id, 
        class : dom[i].firstChild.className ,
        place : dom[i].firstChild.getAttribute('place') ,
        name : dom[i].firstChild.getAttribute('name') ,
        value : dom[i].firstChild.getAttribute('value') ,
        draggable : dom[i].firstChild.getAttribute('draggable'), 
        ondragstart : dom[i].firstChild.getAttribute('ondragstart')    
    }
    DOM.push(objet)

mais forcement ça ne marche pas du coup je ne vois pas trop

[badaze]

Essaie avec

Code :

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

1
2
for (var i = 0 ; i < dom.length ; i++)

[nicdodo]

Bonjour, oui j'avais essayé ça aussi

dans le cas de for (var i = 0 ; i <29 ; i++) la consoile me dit dom[i] is not a function
dans le cas de for (var i = 0 ; i <dom.length ; i++) la consoile me dit dom[i] is undifined

:/

[badaze]

Peux tu poster le contenu de dropzone ? Quels sont les éléments qui sont dedans ?
J'ai fait un essai avec un input dans un div lui même dans un div et j'ai eu une erreur parce que input n'est pas draggable.

[nicdodo]

Voila

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 <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 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>
        <div id = "6" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "7" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "8" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "9" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "10" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "11" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "12" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "13" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "14" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "15" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "16" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "17" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "18" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "19" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "20" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "21" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "22" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "23" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "24" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "25" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "26" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "27" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "28" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "29" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "30" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
 
</div>
 
<input type = "button" id = "save" value = "enregistrer"  onclick = 'enregistrer()'/> 
<input type = "button" id = "charge" value = "charge"  onclick = 'loadJSON()'/>

et la div qui peut s'integrer dans les differnetes div class = "empty"

Code html :

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

1
2
3
4
5
 <div id = "dragzone">
 
        <div  id = "0" class = "src_file" place = "" name = "" value ="" draggable="true" ondragstart="glisser(this,event)">
              <p>fichier</p>
        </div>

En gros avec le drag and drop j'attrape la div enfant de dragzone et je la place dans une div enfant de dropzone en la clonant

[badaze]

Je ne vois nulle part d'objet avec la class = 'full'

[nicdodo]

En fait la class full existe des lors qu'une div enfant de dragzone est cloné dans un enfant de dropzone.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<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 = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
                  <div  id = "1" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)">
        </div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
.......
 
</div>

En gros si je déplace ma div enfant de dragzone dans la div id = "2" enfant de dropzone plusieurs choses se passent:

Pour l'enfant de dropzone : la class passe de "empty" à "full"
Pour la div intégré : la class passe de "src_file" à "droppedfile", son id est incrémenté de 1 et son attribut "place" prend la valeur de l'id conteneur

[badaze]

Essaie ça.
Fais attention aux id. Dans l'exemple que tu donnais il y avait 2 fois id="1".

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
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head>
<script>
function enregistrer() {
 
var json
var dom = document.getElementById('dropzone').children;
  
var DOM = [];
for (i=0;i<dom.length;i++) {
 monObjet = dom[i];
 if (monObjet.className == 'full') {
   petitFils = monObjet.children[0];
   objet = {
        id : petitFils.id, 
        class : petitFils.className ,
        place : petitFils.getAttribute('place') ,
        name : petitFils.getAttribute('name') ,
        value : petitFils.getAttribute('value') ,
        draggable : petitFils.getAttribute('draggable'), 
        ondragstart : petitFils.getAttribute('ondragstart')    
      }
   DOM.push(objet);
 }
}
json = JSON.stringify(DOM);
alert(json);
}
</script>
</head>
<body>
<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 = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x1" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>
  </div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "4" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "5" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x2" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "6" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "7" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "8" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "9" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "10" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "11" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x3" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "12" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "13" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "14" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x4" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "15" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "16" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "17" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "18" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "19" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x5" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "20" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x6" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "21" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "22" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "23" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "24" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "25" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "26" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "27" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "28" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "29" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "30" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
 
</div>
 
<input type = "button" id = "save" value = "enregistrer"  onclick = 'enregistrer()'/> 
</body>
<html>

[nicdodo]

C'est super ça marche merci beaucoup faut vraiment que je travail sur l’algorithmie mais ça viendra avec l’expérience et l'apprentissage de connaissance. Pouvait m'indiquer certaine choses que je n'ai pas forcement compris.

Encadrer le texte qui dépend de la boucle for permet d’empêcher la propagation de la boucle au travers d'autre ligne de code qui pourrait se situer après?
Quand vous mettez monObjet = dom[i] vous affecter dom[i] à la variable monObjet. Parfois si je ne déclare pas la variable au préalable la console me dit "variable not definited". Dans quel cas on est pas obligé de définir la variable?