Bonjour,

Je réalise un système de newsletter avec possibilité de modifier mes blocs (divs) et rajouter des nouveaux modules par drag and drop (glisser-déposer).
Ce que je souhaiterais faire c'est de réorganiser mes blocs par drag and drop et ensuite enregistrer la modification et pouvoir récupérer cette réorganisation à l'étape suivante.

J'ai réussi à déplacer mes élément par glisser-déposer pour les positionner là ou je veux. Mon problème je n'ai pas réussi à sauvegarder la modification. Mes blocs sont affichés en dur et je récupère l'ordre de ma réorganisation grâce une fonction qui crée une chaîne séparée par un point-virgule avec les ID de mes blocs à glisser : 'item1,item3,item2,item5,item4'. Donc la partie drad and drop marche très bien, c'est juste la partie sauvegarde qui me bloque. Est-ce qu'il faut que tous mes blocs soient récupérés dynamiquement pour pouvoir enregistrer ma réorganisation ?

Merci par avance !

Code html :
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
<!-- HTML -->
<div id="container">
     <div id="dragableBox">
         <div class="bigItem" dragableBox="true" id="item1">
                 <h4>Item 1</h4>
                 <p>Incenderat autem audaces usque ad insaniam homines ad haec, quae  nefariis egere conatibus, Luscus quidam curator urbis subito visus:  eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt  incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
         </div>
         <div class="smallItem" dragableBox="true" id="item2">
                 <h4>Item 2</h4>
                 <p>Incenderat autem audaces usque ad insaniam homines ad haec, quae  nefariis egere conatibus, Luscus quidam curator urbis subito visus:  eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt  incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.</p>
         </div>
         <div class="smallItem" dragableBox="true" id="item3">
                 <h4>Item 3</h4>
                 <p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
         </div>
         <div class="bigItem" dragableBox="true" id="item4">
                 <h4>Item 4</h4>
                 <p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea�ra per purum simulacra ferunturet feriunt oculos turbantia composituras.</p>
         </div>      
         <div class="smallItem" dragableBox="true" id="item5">
                 <h4>Item 5</h4>
                 <p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
         </div>
    </div>
    <form action="" method="post"  id="save_reorder">
        <input type="submit" value="Sauvegarder" id="submit">
        <input type="hidden" name="button" value="">
    </form>
</div>
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
 
// JS
$(document).ready(function(){
       function saveData(){
               var which = this.value;
               var saveString = which = "";
               var dragableObjectArray = new Array();
 
               for(var no=0;no<dragableObjectArray.length;no++){
                        if(saveString.length>0)saveString = saveString + ';';
                        ref = dragableObjectArray[no];
                        saveString = saveString + ref['obj'].id;
                }   
                $('[name="button"]').val(saveString);
 
                return false;
         }
         $('#submit').on('click', saveData);
});