enregistrement bdd position drag via script

Eléphanteau du PHP | 18 Messages

11 juin 2019, 18:38

bonjour à tous ,

voilà j'ai fais un script de drag ans drop en suivant un tuto , mais j'ai du mal comprendre quelques choses et du coup cela ne fonctionne pas comme cela devrait .....

mon problème est le suivant , je charge des photos sur une page , le but étant de pouvoir organiser les photos dans l'ordre que l'on souhaite et que cela s'enregistre dans la bdd ( colonne position ) .

l'enregistrement se passe très bien , mais le problème c'est que les photos ne se déplace pas comme je le souhaite , dès que je déplace une photo , je ne peu pas la mettre ou je veux elle se mets au début de ma liste .

alors que normalement je devrais pouvoir la placer ou je le souhaite .

(pour infos le script suivant marche très bien , mais je n'arrive pas enregistrer la position dans la bdd )

Code : Tout sélectionner

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Sortable - Display as grid</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 800px; } #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 150px; height: 150px; font-size: 4em; text-align: center; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); } ); </script> </head> <body> <ul id="sortable"> <?php include('connect.php'); $resultat=$pdo->query("SELECT * FROM photo_bien INNER JOIN bien ON bien.Id_bien = photo_bien.Id_bien WHERE photo_bien.Id_bien = 14"); $resultat->setFetchMode(PDO::FETCH_OBJ); while($result = $resultat->fetch() ) { $dossier = $result->photo; $file = $result->photo_bien; $Id_bien = $result->Id_bien; $Id_photo = $result->Id_photo; if(($result->photo_bien) == true ) { ?> <li id="<?php echo $Id_photo; ?>" class="ui-state-default"><img width="150" height="150" src="<?php echo $file; ?>"></li> <?php } } ?> </ul> </body> </html>


je ne sais pas si j'ai été assez clair , mais voici le code .....et merci pour votre aide , je suis débutant ...


Code : Tout sélectionner

<ul id="sortlist" class="ul_style"> <?php include('connect.php'); $resultat=$pdo->query("SELECT * FROM photo_bien INNER JOIN bien ON bien.Id_bien = photo_bien.Id_bien WHERE photo_bien.Id_bien = '".$Id_bien."'"); $resultat->setFetchMode(PDO::FETCH_OBJ); while($result = $resultat->fetch() ) { $dossier = $result->photo; $file = $result->photo_bien; $Id_bien = $result->Id_bien; $Id_photo = $result->Id_photo; if(($result->photo_bien) == true ) { ?> <li id="<?php echo $Id_photo; ?>" class="sortable_item"><img width="150" src="<?php echo $file; ?>"> <form class="photo_avant" id="valid_photo_avant_<?php echo $file;?>" method="post" action="valid_photo_avant.php" enctype="multipart/form-data"> <input type="hidden" name="Id_bien" value="<?php echo $Id_bien;?>"> <input type="hidden" name="photo" value="<?php echo $file;?>"> <input type="hidden" name="Id_photo" value="<?php echo $Id_photo;?>"> <label class="favori" ><input class="favori" title="favori" width="52%" type="image" src="<?php if(($result->photo_en_avant) == $file) { echo 'images/favori_vert.png';}else { echo 'images/favori.png'; } ?>" onchange="document.getElementById('valid_photo_avant').submit()"> </label> </form> <form class="supp_photo" id="valid_supp_photo_<?php echo $file;?>" method="post" action="valid_supp_photo.php" enctype="multipart/form-data"> <input type="hidden" name="Id_bien" value="<?php echo $Id_bien;?>"> <input type="hidden" name="photo" value="<?php echo $file;?>"> <input type="hidden" name="Id_photo" value="<?php echo $Id_photo;?>"> <label class="corbeille" ><input class="corbeille" title="Supprimer" width="70%" type="image" src="images/corbeille.jpg" onchange="document.getElementById('valid_supp_photo').submit()"></label> </form> </li> <?php } } ?> </ul> <script type="text/javascript"> $(document).ready ( function () { $( "#sortlist" ).Sortable ( { accept : 'sortable_item', axis : 'y', onchange : function ( sorted ) { serial = $.SortSerialize ( 'sortlist' ); // requète Ajax pour l'enregistrement des positions $.ajax ( { url : "set_position.php", type : "post", data : serial.hash, // Si vous avez besoin d'un feedback de la requête vous // pouvez utiliser ces fonctions ci dessous. // complete: function(data){alert(data);}, // success: function(feedback){ $('#data').html(feedback);}, // error: function(){alert('Erreur lors du déplacement');} }); } }); }); </script>

et le fichier d'enregistrement :

Code : Tout sélectionner

<? include('connect.php'); // Récupération des valeurs post $sortable = $_POST['sortable']; // On update la table avec les nouvelles positions for ($i = 0; $i < count($sortable); $i++) { // SQL : $pdo->exec("update photo_bien set position ='".($i + 1)."' where Id_photo = '".$sortable[$i]."'"); } ?>