Sujet Précédent Sujet Suivant

Drag and drop avec organisation du contenu

Utilisateur anonyme - Modifié le 1 juin 2017 à 17:52
 Utilisateur anonyme - 2 juin 2017 à 18:14
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 ! 


<!-- 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>


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

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38137 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
1 juin 2017 à 17:46
Bonjour,

Tu dis :
Mon problème je n'ai pas réussi à sauvegarder la modification

En quoi l'enregistrement ne fonctionne t'il pas ?
Quel est le code correspondant à l'enregistrement.(le code php) ?


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 ?

Pour l’enregistrent .. non ... mais pour l'affichage Oui !
Il faut bien faire en sorte que tu ré affiches tes blocs en fonction de l'ordre que tu as enregistré ....

0
Réponse 2 / 3
Utilisateur anonyme
Modifié le 1 juin 2017 à 18:15
Merci d'avoir pris le temps de me répondre.
Je n'ai pas encore fait le code php parce que je ne dais pas comment procéder dans ce cas de figure. Je peux enregistrer dans une table quelconque ce que me renvoie la fonction : saveData() que je récupère dans l'input de type hidden. Mais je n'ai pas une table correspondant à l'enregistrement de mes blocs pour la lier (jointure). D’où ma question : Est-ce qu'il faut que tous mes blocs soient affichés dynamiquement pour pouvoir ensuite enregistrer ma réorganisation ? Ou bien y-a-t-il un moyen de le faire sans avoir besoin d'enregistrer tous mes blocs en base de données ? Mes blocs n'ont pas la même structure html c-à-d que les contenus html sont différents d'un bloc à un autre. Je ne peux pas faire de boucle quand il s'agit de les afficher dynamiquement.
J'espère que je suis claire.

Cdlt,
0
Réponse 3 / 3
Utilisateur anonyme
2 juin 2017 à 18:14
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 ! 


<!-- 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>


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


 
// 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()));
}
0

Discussions similaires

Drag and drop dans un tableau HTML
dedeisep2 -
bizibiz17 -

6 réponses
Drag Drop de fichiers
Popolino69 -
Frederyck -

3 réponses
drag and drop d'une image d'une page web lancée depuis un webbroswer
chrisledeveloppeur -
chrisledeveloppeur -

6 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
drag and drop probleme de superposition d'image
titan3131 -
jordane45 -

2 réponses
Rejoignez-nous