Gérer l'ordre des éléments + sauvegarde en live en bd

Version imprimable

02/08/2017, 20h36
mOscar007

Gérer l'ordre des éléments + sauvegarde en live en bd

Bonjour à tous,

J'aimerais faire la même chose que ce qu'il y a sur ce lien : http://www.sebastienangot.fr/blog/developpement/tutoriel-drag-and-drop-jquery-ajax-sauvegarde-en-base-de-donnees/

Mais seulement dans mon cas ça ne marche pas puisque je ne récupère pas mes blocs dans une boucle. Mes blocs n'ont pas la même structure html donc je suis obligé de récupérer dynamiquement chaque bloc avec sa propre requête. Ce qui cause à mon avis le problème de positionnement. Existe-il un moyen de le faire sans passer par la boucle ? Merci

Cdlt,
02/08/2017, 22h20
Showie

Bonjour,

Aurais tu moyen de nous montrer la structure de tes éléments ça nous aiderais à analyser ton soucis ?

Re @Showie,

Merci d'avoir pris le temps de me répondre.
Mes éléments (divs) ci-dessous ont des structures différentes dans une template (page). Je souhaiterais gérer leur ordre c-à-d les déplacer (ré-organiser) par glisser-déposer et ensuite sauvegarder en live en base de données comme dans ce tutoriel : http://www.sebastienangot.fr/blog/developpement/tutoriel-drag-and-drop-jquery-ajax-sauvegarde-en-base-de-donnees/

Les différences avec l'exemple du tutoriel dans le lien ci-dessus sont : moi j'ai des blocs (div) au lieu des listes (li) et dans le tutoriel c'est une boucle pour afficher les puces comme il s'agit des mêmes éléments. Dans mon cas les divs n'ont pas les mêmes éléments donc je ne peux pas faire de boucle, d'ou la récupération individuel des divs. Hors pour avoir de l'ordre il faut qu'il y ait une boucle. Existe-il de solutions sans boucle ? Merci

Voici la structure de mes éléments :
Code:

1 2 3 4 5 6 7 8 9 10 11 // Structure de la table `order` CREATE TABLE IF NOT EXISTS `order` ( `id` int(11) NOT NULL AUTO_INCREMENT, `titre` varchar(255) NOT NULL, `description` text NOT NULL, `image` varchar(255) NOT NULL, `lien` varchar(255) NOT NULL, `position` int(11) NOT NULL, PRIMARY KEY (`newsletter_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div id="<?=$row['id'];?>"> <h4><?=$row['titre'];?></h4> <p><img src="<?=$row['image'];?>"></p> <p><?=$row['description'];?></p> <p><a href="#"><?= $row['lien']; ?></a></p> </div> <div id="<?=$row['id'];?>"> <h4><?=$row['titre'];?></h4> <p><?=$row['description'];?></p> <p><a href="#"><?= $row['lien']; ?></a></p> </div> <div id="<?=$row['id'];?>"> <h4><?=$row['titre'];?></h4> <p><?=$row['description'];?></p> </div> <div id="<?=$row['id'];?>"> <p><img src="<?=$row['image'];?>"></p> <p><a href="#"><?= $row['lien']; ?></a></p> </div>

03/08/2017, 12h15
Showie

Ta liste d'élément devrait-être enrichie de class sur les div et d'une div englobant afin de faciliter la sélection des éléments.

voila un rapide exemple avec ta structure de code :http://jsfiddle.net/joxbxzz1/

est ce que c'est bon pour toi?

Re @Showie,

Merci encore pour ta réponse mais ce n'est pas la réorganisation le problème mais plutôt la sauvegarde.
Je veux afficher mes DIV dans l'ordre, ce qui sous-entend :
J'affiche le premier;
Puis le deuxième;
et ainsi de suite...;

Hors sans boucle, mon programme ne peut pas afficher les éléments du 1er au dernier. Je précise bien que mes DIV n'ont pas la même constitution des éléments (c-à-d structure différente). Est-ce que le fait de ne pas passer par une boucle pose problème ?

Faut-il (en base de données) que je précise pour chaque DIV à afficher, celle que je veux et créer des fonctions pour chacune des DIV ?

Par exemple :
Code:

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 // connexion BD require_once('db.php'); $sql = 'SELECT * FROM maTable ORDER BY position'; $req = $db->prepare($sql); $req->execute() or die(print_r($req->errorInfo())); $row = $req->fetchAll(); switch ($row['id']) { case 1: function div1(){ echo "<div class='toto'>$row['contenu_div1']</div>"; } break; case 2: function div2(){ echo "<div class='tutu'>$row['contenu_div2']</div>"; } break; case 3: function div3(){ echo "<div class='tata'>$row['contenu_div3']</div>"; } break; ... default: code to be executed } //------------------------------------ //recup des div à afficher en bdd par exemple stockées dans un array $a_afficher = array(); $a_afficher[] = array('quellediv'=>'div1'); $a_afficher[] = array('quellediv'=>'div2'); $a_afficher[] = array('quellediv'=>'div3'); //------------------------------------ // je génère l'affichage //... via une BOUCLE !!!! for ($i=0;$i<3;$i++){ $a_afficher[$i](); }
Merci

03/08/2017, 17h59
Showie
ok,

Juste pour info, j'ai fait une petite erreur dans le code précédent aussi j'ai corrigé le fiddle

Le fait de ne pas passer par une boucle ne pose pas de soucis il faut juste trouvé un point commun à tout tes blocs regarde l exemple du fiddle que j'ai modifié :http://jsfiddle.net/joxbxzz1/8/ le point commun c'est la class enfant et le fait d'appartenir à la DIV.bougeable.

Quand à l'enregistrement tu reçois les id dans l'ordre des positions :

Donc dans ton script /updateListe.php tu fait une boucle genre
Code:

1 2 3 4 5 6 $parametres = array('div_1','div_3','div_2'); for($i=1;$i<count($parametres);$i++){ UPDATE maTable SET position = $i WHERE id = $parametres[$i]; }
03/08/2017, 21h24
mOscar007

Re,

C'est noté pour la correction.
Je ferai le test et je te dirai quoi après. Merci

Cdt,

Re @Showie,

En testant, j'ai remarqué qu'en ajoutant une autre DIV (bloc) qui n'est pas dans ma boucle la sauvegarde ne marche pas.
Par exemple j'ai 2 blocs : bloc_1 et bloc_2. Je clone une DIV qui est dans le bloc_1 pour l’insérer dans le bloc_2. Et c'est le bloc_2 qui le bloc finale que je veux sauvegarder comme dans l'exemple précédent :

Code:

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
 
// connexion BD
require_once('db.php');
 
$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll(); 
 
<div id="container">
      <div id="bloc_1">
            <div id='div_1'>contenu_div1</div>
            <div id='div_2'>contenu_div2</div>
            <div id='div_3'>contenu_div3</div>
       </div>
 
       <div id="bloc_2">
             foreach ($rows as $row){
                 switch ($row['id']) {
                      case 1:
                      <div id='div_1'>$row['contenu_div1']</div>
                      break;
                      case 2:
                      <div id='div_2'>$row['contenu_div2']</div>
                      break;
                      case 3:
                      <div id='div_3'>$row['contenu_div3']</div>
                      break;
                      ...
                      default:
                      echo '';
                } 
            }
       </div>
</div>

Merci
Cdt,

Re,

Tu as des id qui sont dupliqués

Code:

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
 
 
// connexion BD
require_once('db.php');
 
$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll(); 
 
<div id="container">
      <div id="bloc_1">
            <div id='old-div_1'>contenu_div1</div>
            <div id='old-div_2'>contenu_div2</div>
            <div id='old-div_3'>contenu_div3</div>
       </div>
 
       <div id="bloc_2">
             foreach ($rows as $row){
                 switch ($row['id']) {
                      case 1:
                      <div id='div_1'>$row['contenu_div1']</div>
                      break;
                      case 2:
                      <div id='div_2'>$row['contenu_div2']</div>
                      break;
                      case 3:
                      <div id='div_3'>$row['contenu_div3']</div>
                      break;
                      ...
                      default:
                      echo '';
                } 
            }
       </div>
</div>

SI tu change l'id dans le bloc 1 pas de soucis par contre je ne vois pas le but que tu cherches a atteindre avec ta duplication ?

Décrit moi le fonctionnement que tu souhaites ainsi je pourrais t'aider plus précisément.

Re @Showie,

En fait, ce que je souhaiterais faire c'est ajouter (c-à-d cloner) une DIV du bloc_1 dans le bloc_2 puis la sauvegarder pour qu'après rechargement de la page ma nouvelle DIV insérée reste afficher dans la liste de mes DIV qui sont dans la boucle (bloc_2).
C'est un système d'ajout de modules (mes DIV sont de modules) comme c'est le cas dans certains systèmes d'édition de newsletter. Je peux rajouter des nouveaux modules puis les supprimer. Pour appuyer mon explication j'ai modifié le précédent code pour qu'on puisse comprendre ma démarche. Pour l'insertion d'un nouveau module (DIV) ça marche. C'est juste quand je rajoute ce dernier dans le bloc_2 je n'ai pas réussi à le sauvegarder.

Je mets un lien qui illustre ce que je souhaiterais faire : https://topol.io/editor/5984cdb91dc32/edit
Dans l'exemple qui est dans le lien c'est par glisser-déposer pour ajouter un élément mais dans mon cas l'élément est ajouté lorsqu'on le survole et clique sur "insert".

Merci

Cdlt,

Code:

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
// connexion BD
require_once('db.php');
 
$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll(); 

<!-- menu gauche -->
<div id="modules">
    <div id="menu">
        <div id="mod01"><img src="image-mod01.jpg"></div>
        <div id="mod02"><img src="image-mod02.jpg"></div>
        <div id="mod03"><img src="image-mod03.jpg"></div>
    </div>


    <div id="dropdown">
        <div class="div_mod" data-type="mod01" data-id="1">nouveau contenu 1</div>
                <div class="div_mod" data-type="mod02" data-id="2">nouveau contenu 2</div>
                <div class="div_mod" data-type="mod03" data-id="3">nouveau contenu 3</div>
    </div>    
</div>
<div id="container">
    <div id="bloc_1">
        <div id="div_mod01" class="row" data-id="1">contenu div 1</div>
        <div id="div_mod02" class="row" data-id="2">contenu div 2</div>
        <div id="div_mod03" class="row" data-id="3">contenu div 3</div>
    </div>


    <div id="bloc_2">
        foreach ($rows as $row){
            switch ($row['id']) {
                case 1:
                    <div id="div_1">contenu_div1</div>
                break;
                case 2:
                    <div id="div_2">contenu_div2</div>
                break;
                case 3:
                    <div id="div_3">contenu_div3</div>
                break;
                    ...
                default:
                    echo '';
            } 
        }
    </div>
</div>

Code:

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
 
(function(){
        $("#mod01").hover(function() {
            $(".div_mod[data-type='mod01']").show();
            $(".div_mod[data-type='mod02']").hide();
            $(".div_mod[data-type='mod03']").hide();
        });    
        $("#mod02").hover(function() {
            $(".div_mod[data-type='mod01']").hide();
            $(".div_mod[data-type='mod02']").show();
            $(".div_mod[data-type='mod03']").hide();
        });    
        $("#mod03").hover(function() {
            $(".div_mod[data-type='mod01']").hide();
            $(".div_mod[data-type='mod02']").hide();
            $(".div_mod[data-type='mod03']").show();
        });    
 
 
        $(".div_mod").hover(
            function() {
                $(this).append('<div class="add"><i class="fa fa-plus"></i>Insert</div>');
                $('.add').click(function() {
                    $("#div_1").prepend($("#bloc_1 .row[data-id='"+$(this).parent().attr("data-id")+"']").clone());
                    $("#dropdown").fadeOut(200);
                });
              }, function() {
                $(this).children(".add").remove();
              }
        ); 
})();

10/08/2017, 14h15
Showie

Re désolé du délai, j'ai été très occupé.

Donc dans ton cas, tu souhaites plus un fonctionnement en Draggable - Sortable Doc JQUERY

Voici un http://jsfiddle.net/105yk0pm/6/ pour t'illustrer le fonctionnement y a des points de CSS à revoir mais de toutes façons, il faut le faire matcher avec tes besoins.

Tu as une fonction sur l évènement RECEIVE qui ajoute des ID au fur et a mesure.
10/08/2017, 14h31
mOscar007

Re @Showie

Merci encore de m'avoir répondu.
En fait le fonctionnement n'est pas exactement ce que je souhaiterais faire.

En effet, j'ai 2 blocs :

- un bloc de gauche qui contient les modules à ajouter.
- un bloc de droite qui contient les modules par défaut et les nouveaux rajoutés.

Dans le bloc de gauche on retrouve 3 éléments permettant au survol d'afficher en bas les modules correspondant pour l'ajout. Chaque élément dispose d'un bouton "Insert" permettant de l'insérer dans le bloc de droite au tout début des éléments existants. Dans le bloc de droite on a la possibilité réorganiser les éléments par glisser-déplacer en cliquant sur le bouton "Modifier la position des éléments" pour changer la position d'un élément et la sauvegarder.

Mon problème est de pouvoir sauvegarder un module après l'avoir ajouté dans le bloc de droite et même après rechargement de la page le nouveau élément reste dans la liste. Je pense qu'il faut que je calcule à quelle position est ajouté le module puis de décaler dans la bdd tous les modules suivants d'une place et enfin insérer le nouveau module à sa place. C'est juste une idée mais je ne suis pas sûr et je ne vois pas comment la coder.

Tu trouveras dans le lien suivant mon code avec la partie ajout de nouveau module et la partie réorganisation que j'ai réussi à traiter : https://jsfiddle.net/mecano/cdq07mjb/7/

Merci pour ton aide !
Cdlt,
11/08/2017, 12h17
Showie

Salut,

Bon je pense que cette fois ci on doit être pas mal par rapport à ton fonctionnement https://jsfiddle.net/zp3gdeuj/3/

N'hésite pas si tu as des questions mais le code est relativement simple.

Salut @Showie,

Merci encore pour ton aide.
C'est parfait tout marche comme je veux.
Il me reste juste la partie sauvegarde d'un module rajouté côté PHP.

Comment puis-je récupérer mes datas concernant le nouveau module pour l'enregistrer en base de données ?
Faut-il limiter les décalages en optant pour les positionnements à trous (pas trop nécessaire juste pour avoir un avis) ? C-à-d : module_1 en position 1, module_2 en position 101, on ajoute un module_3 entre les deux, on récupère la position du module précédent et suivant, on fait la moyenne ([1 + 101]/2 = 51) et on insert le nouveau module à la position calculée (51)

Merci
Cdlt,

Voici les infos en BD :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Structure de la table `newsletter` CREATE TABLE IF NOT EXISTS `newsletter` ( `id` int(11) NOT NULL AUTO_INCREMENT, `texte` varchar(Max) NULL, `image` varchar(255) NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ; // Contenu de la table `newsletter` INSERT INTO `newsletter` (`id`, `texte`, `image`) VALUES (1, 'NULL', 'http://zupimages.net/up/17/32/bgot.jpg'), (2, 'Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem.', 'http://zupimages.net/up/17/32/bgot.jpg'), (3, 'Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem.', 'NULL');
NB: chaque module correspond à une ligne dans la table.

11/08/2017, 16h27
Showie

J'ai juste étoffé les infos dans le tableau ORDRE, tu n'as plus qu'a le transmettre à ton script PHP par ajax et l enregistrement sera ok.
Je filtre sur la class ROW afin de ne remplir les champs que pour les nouveaux modules.
Enfin il faut que tu rajoute un champs position dans ta base afin de pouvoir ressortir tes éléments dans le bon ordre.

https://jsfiddle.net/zp3gdeuj/5/

Pour le positionnement à trou je ne pense pas vu que les positions sont toutes recalculées en permanence.
Par contre si le nombre d'élément au total peut augmenter de façon exponentiel il faudra peut être supprimer le recalcule automatique et opter pour une solution à trou ou mieux en liste chainée.
11/08/2017, 16h38
mOscar007

Je ferai le test et je reviendrai pour te dire quoi après.
Merci encore !

A bientôt !

Bonjour @Showie,

Désolé du retard. J'étais un peu souffrant ces derniers temps. Bref !

Ce qui me bloque toujours c'est la sauvegarde du nouveau module ajouté. Le problème est que mes modules sont dans une boucle or ceux que je rajoute ne le sont pas. C'est ce qui me cause de souci pour la sauvegarde.

J'ai modifié mon code dans le lien suivant : https://jsfiddle.net/mecano/cdq07mjb/11/

Merci
Cdlt,

Voici la partie PHP:

Code:

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
 
// connexion à la bd
require_once('db.php');
 
$sql = 'SELECT * FROM newsletter ORDER BY position';
$req = $db->prepare($sql);
$req->execute() or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();
 
// Bloc 1
<div id="bloc_1" style="display:none;"> 
        <div class="div_mod01 row drag-drop" data-id="1" data-position="1">
              <img src="http://zupimages.net/up/17/32/bgot.jpg" width="240" height="70">
        </div>  
        <div class="div_mod02 row drag-drop" data-id="2" data-position="2">
               <div class="margin-elt float-elt"><img src="http://zupimages.net/up/17/32/bgot.jpg" width="50" height="50"></div>
               <div class="size-paragraphe">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem.</div>
       </div> 
       <div class="div_mod03 row drag-drop" data-id="3" data-position="3">
               <p class="size-paragraphe margin-elt">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem.</p>
       </div>   
</div>  
 
<div id="msg"></div>
 
// Bloc 2
<div id="bloc_2">
     <?php foreach ($rows as $row) { 
            switch ($row['id']) {    
            case 4:
            ?>
                <div id="div_1" class="drag-drop" data-id="<?=$row['id'];?>" data-position="<?=$row['position'];?>">
                    <img src="<?=$row['image'];?>" width="120" height="70">
                    <img src="<?=$row['image_2'];?>" width="120" height="70">
                </div>
            <?php
               break;
           case 5:
            ?> 
                <div id="div_2" class="drag-drop" data-id="<?=$row['id'];?>" data-position="<?=$row['position'];?>">
                    <div class="size-paragraphe margin-elt"><?=$row['texte'];?></div>
                    <div><img src="<?=$row['image'];?>" width="50" height="50"></div>
                </div>
            <?php
                break;
            case 6:
            ?>    
                <div id="div_3" class="drag-drop" data-id="<?=$row['id'];?>" data-position="<?=$row['position'];?>">
                    <p class="size-paragraphe"><?=$row['texte'];?></p>
                    <p class="size-paragraphe"><?=$row['texte'];?></p>
                </div>
            <?php
                break;
               default: 
                   echo '';
             }    
           } 
      ?>    
</div>

Code:

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
 
    $error = true;
    $msg = array('status'=>!$error, 'msg'=>'Echec lors de l\'enregistrement !');
 
    if(isset($_POST)) {
        if (isset($_POST['id']) && !empty($_POST['id']) && $error) {
            $id = $_POST['id'];
            $error = false;
        } else {
            $error = true;
        }
        if (isset($_POST['rang']) && !empty($_POST['rang']) && $error) {
            $rang = $_POST['rang'];
            $error = false;
        } else {
            $error = true;
        }
        if (isset($_POST['text']) && !empty($_POST['text']) && $error) {
            $text = $_POST['text'];
            $error = false;
        } else {
            $error = true;
        }
        if (isset($_POST['img']) && !empty($_POST['img']) && $error) {
            $img = $_POST['img'];
            $error = false;
        } else {
            $error = true;
        }
        if (!$error) {
            $sql = "INSERT INTO newsletter (texte, image, position) VALUES (:texte, :img, :rang)";
            $datas = array(":texte"=>$text, ":img"=>$img, ":rang"=>$rang);
            $req = $db->prepare($sql);
            $res = $req->execute($datas);
            $msg = array('status'=>!$error, 'msg'=>'Saisie enregistrée avec success !');
            print_r($res);
            print_r($req);
        }    
    } 
    // send data as json format
    echo json_encode($msg);