Forums Développement Multimédia

Aller au contenu

Liste drag&drop liée à BDD

drag drop jQuery PDO liste CODE Ajax JQuery EaseJs

2 réponses à ce sujet

#1 XueFang

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 77 messages

Posté 02 December 2012 - 00:22 AM

Bonjour à tous,

Je souhaiterai réaliste une liste draggable et au moment du drop que la BDD mette à jour la colonne "ORDRE" de ma table.

J'ai déjà réalisé ma liste qui est créé à la volé par PHP depuis un BDD SQL et qui ressemble à ceci:


<div id="thumbs_content">
  <ul>
         <li class='photo_thumb_galerie' id='position1'>/*Contenu*/</li>
         <li class='photo_thumb_galerie' id='position2'>/*Contenu*/</li>
         <li class='photo_thumb_galerie' id='position3'>/*Contenu*/</li>
        //etc...
  </ul>
</div>
 

J'ai fais un javascript qui ressemble à ceci:



$('#thumbs_content ul').sortable({
  containment: "#thumbs_content",
  revert: true,
  helper: 'clone',
  placeholder: 'photo_thumb_galerie',
  opacity: 0.5,
  scroll: false
})

Ensuite je n'ai aucune idée de comment m'y prendre... J'ai bien regardé sur des forums comment il fallait faire mais les techniques diffères et j'avoue ne pas comprendre ce que les gens écrivent comme je n'ai jamais fait ce genre de gadgets précédemment. Le déplacement fonctionne, j'aimerai juste savoir comment sauvegarder au moment du drop, la position de mes éléments dans la BDD à l'endroit qui correspond.

#2 Badwolf

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 667 messages

Posté 02 December 2012 - 01:15 AM

dans ton code javascript tu dois appeler une fonction après un changement d'ordre dans ta liste

ex:


$('#thumbs_content ul').sortable({
  containment: "#thumbs_content",
  revert: true,
  helper: 'clone',
  placeholder: 'photo_thumb_galerie',
  opacity: 0.5,
  scroll: false,
change:function(event, ui){
maFonction(info);
}
})
 

et spécifier le contenu de ta fonction maFonction:

ex:


function maFonction(info){
$.ajax({
  type: 'POST', // Le type de ma requete
  url: 'http://www.monsite.com/serveur.php', // L'url vers laquelle la requete sera envoyee
  data: {info:info},
  success: function(data, textStatus, jqXHR) {
        // La reponse du serveur est contenu dans data
  },
  error: function(jqXHR, textStatus, errorThrown) {
        // Une erreur s'est produite lors de la requete
  }
});
}

tu stockes le nouvel ordre dans la variable info, la manière importe peu.
cette donnée est transmise à la page PHP qui traite et met à jour ta BDD.

pour récupérer l'ordre essaies la fonction toArray() de jquery UI sortable.

pour la transmission des données je te conseille le format JSON.

après tu n'est pas obligé d'utiliser l'event "change", il en existe d'autres, je te conseille de parcourir la documentation de jquery UI:

http://api.jqueryui.com/sortable/
Haoooooooooooooooooooooooooooooooooooooooooooooou !!!

#3 XueFang

    Ceinture Bleue

  • Members
  • PipPipPipPipPip
  • 77 messages

Posté 02 December 2012 - 02:05 AM

:mrgreen: Ehhhhh merci de répondre aussi vite, je test ça dès demain! Là j'ai forcer le code pour aujourd'hui :blink:



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)