Discussion :

[mOscar007]

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);
});

[mathieu]

vous voulez enregistrer cet ordre où ?
sur le serveur qui affichera l'ordre enregistré aux autres visiteurs de la page ?

[mOscar007]

Bonjour,

Merci d'avoir pris le temps de me répondre.
En effet, je veux enregistrer l'ordre sur le serveur en php.
Mais je n'ai pas de table d'enregistrement correspondant à mes blocs pour la lier à une table ordre par exemple (jointure). D’où ma question : Est-ce qu'il faut que tous mes blocs soient affichés dynamiquement pour pouvoir ensuite enregistrer cet ordre ? Ou bien y-a-t-il un moyen de le faire sans avoir besoin d'enregistrer tous mes blocs en base de données puisqu'il s'agit d'une newsletter ? Mes blocs n'ont pas la même structure html c-à-d que les contenus html sont différents d'un bloc à un autre. En cas d'enregistrement en base de données jee ne peux pas faire de boucle quand il s'agit de les afficher dynamiquement.

Cdlt,

[mathieu]

vous n'avez pas besoin d'enregistrer les blocs entiers en base de données. ici la seule donnée utile est l'ordre des blocs

[mOscar007]

Bonjour,

J'ai modifier mon code de cette manière mais et je sauvegarde l'ordre.
Mais le souci dès que j'actualise ma page l'ordre disparaît. Merci pour votre aide !

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 class="container">
     <div class="block" data-id="1">
          <h4>Heading 1</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="block" data-id="2">
          <h4>Heading 2</h4>
          <p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
     </div>
     <div class="block" data-id="3">
          <h4>Heading 3</h4>
          <p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
     </div>
     <div class="block" data-id="4">
          <h4>Heading 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="block" data-id="5">
          <h4>Heading 5</h4>
          <p>Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast.</p>
     </div>
     <div id="nscrol">
          <a id="dnd" class="bouton2">update</a>
          <a id="cancel" class="bouton2 cacher">back</a>
          <a id="reset" class="bouton3 cacher">reset</a>
          <a id="record" class="bouton cacher">save</a>
     </div>
</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
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
82
83
84
85
86
87
$(document).ready(function(){
    $('#nscrol').on('click','#dnd',function(e){
        e.preventDefault();
        $(this).fadeOut('slow',function(){
            $(this).siblings().fadeIn('slow').css("display", "inline-block");
        });
        // ajoute la propriété pour le drop et le transfert de données
        $.event.props.push('dataTransfer');
        $('.block').attr('draggable',true).css('outline','1px solid green').find('*').attr('draggable',false);
        var i, dragged, class_name;
        var traitement = false;
        $('.block').on({
            dragstart:function(e){
                if(!traitement){
                    dragged = $(this);
                    i = dragged.index();
                    class_name = dragged.attr('class');
                    dragged.css('opacity', '0.5');
                    e.dataTransfer.setData('text/html',dragged.html());
                }
            },
            dragenter:function(e){
                e.preventDefault();
            },
            dragleave:function(){
            },
            dragover:function(e){
                e.preventDefault();
            },
            drop:function(e){
                var dropzone = $(this);
                if(typeof(dropzone)=='undefined'||dropzone.get(0)==dragged.get(0)){
                    e.preventDefault();
                    return false;
                }
                if(!traitement){
                    var data = e.dataTransfer.getData('text/html');
                    if(dropzone.index()<=i){
                        dropzone.before(dragged);
                    }else{
                        dropzone.after(dragged);
                    }
                }
             },
             dragend:function(){
                $(this).css('opacity','1');
             },
             click:function(e){
                e.preventDefault();
             }
         });
      }).on('click','#cancel',function(){
         $('.block').off().css('outline','none');
         $('[draggable]').removeAttr('draggable');
         $('#dnd').siblings().fadeOut('slow', function(){
             $('#dnd').fadeIn('slow');
         });
      }).on('click','#record',function(){
         var len = $('.block').length;
         var ordre = [];
         var me = $(this);
         for(var j=0;j<len;j++){
             ordre.push({id:$('.entree_block').eq(j).data("id"),rang:$('.entree_block').eq(j).index('.entree_block')});
         }
         $.ajax({
             type: "POST",
             url: window.location.origin+"/news/orderUpdate.php",
             data: {ordre:JSON.stringify(ordre)},
             beforeSend:function(){
             var img = '<img id="load" src="'+window.location.origin+'/news/iconLoading.gif" style="height:22px;margin-left:15px;margin-right:118px;vertical-align:middle;">';
             ($('#msg').length)?$('#msg').replaceWith(img):me.after(img);
         },
         success:function(){
             $('#load').replaceWith('<b id="msg" style="margin-left:5px;">Changements enregistrés.</b>');
         }
      });
   }).on('click','#reset',function(){
      $.ajax({
         type: "POST",
         url: window.location.origin+"//orderUpdate.php",
         data: {reset:true},
         success:function(){
             window.location.reload();
         }
      });
   });
});

Code php :

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
// orderUpdate.php
require_once('db.php');
 
$ordre = isset($_REQUEST['ordre'])?$_REQUEST['ordre']:'';
$reset = isset($_REQUEST['reset'])?$_REQUEST['reset']:'';
 
if (!empty($ordre)){
   // Décode le JSON
   $json_data = json_decode($ordre);
 
   foreach($json_data as $v){
       $code_id = $v->id;
       $rang = $v->rang;
 
       $q = array('code'=>$code_id, 'rand'=>$rang);
       $sql = 'INSERT INTO ordre (code_id, rand) VALUES (:code, :rand)';
       $req = $db->prepare($sql);
       $req->execute($q) or die(print_r($req->errorInfo()));
    }    
} elseif (!empty($reset)){
    $q = array('code'=>$code_id);
    $sql = 'DELETE FROM tbl_module_ordre WHERE code_id = :code';
    $req = $db->prepare($sql);
    $req->execute($q) or die(print_r($req->errorInfo()));
}