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'