<!--:fr-->[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)<!--:-->

[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)

février 24th, 2008 JS Antoine

Bonjour!

Je profite d’un peu de répit ce dimanche pour terminer la première partie de ce tutoriel. Nous allons voir comment faire des drag’n drop (glisser déposer) avec JQuery. Dans un second temps nous verrons comment sauvegarder les modifications directement en base de donnée avec de l’ajax. Pour voir un exemple je vous propose d’aller faire un tour sur mon site de gestion d’une équipe de rugby (projet en cour) : teamManagerXV.

Bon allez on attaque?!

  • Le coté client : XHTML

Comme d’habitude le code puis les explications :-)

  1.  
  4.  
  5. <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
  6. <script type=”text/javascript” src=”jquery.js”></script>
  7. <script type=”text/javascript” src=”interface.js”></script>
  8. <script type=”text/javascript” src=”script.js”></script>
  9. <link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”/>
  10. </head>
  13. <h1>Waouuuuuuuhhhhhh</h1>
  14. <div class=”ingredient”>
  15. <div id=”1″ class=”drag”>sucre</div>
  16. <div id=”2″ class=”drag”>lait</div>
  17. <div id=”3″ class=”drag”>farine</div>
  18. <div id=”4″ class=”drag”>oeuf</div>
  19. <div id=”5″ class=”drag”>sel</div>
  20. </div>
  21. <div class=”recette” id=”r_1″>
  22. <h3>Pâte à crêpe</h3>
  23. <div class=”recette_ingredient”></div>
  24. </div>
  25. <div class=”recette” id=”r_2″>
  26. <h3>Pâte brisée</h3>
  27. <div class=”recette_ingredient”></div>
  28. </div>
  29. </div>
  30.  
  31. </body>
  32. </html>

Alors rien de particulier pour le moment en terme de structure du document. Vous pouvez remarquer que nous avons 3 divs « principaux » : un pour les ingrédients et un pour chaque recette. Celui pour les ingrédients contient nos éléments draggables tandis que ceux pour les recettes contiennent nos récepteurs (zone de drop).

  • un peu de style : CSS
  1.  
  2. div{border:1px solid black}
  3. .drag,.recette_ingredient{height:20px;width:60px}

Pas grand chose ici! Juste des bordures pour que ce soit « compréhensible » et un largeur/hauteur définie pour les zones de drop et les drags.

  • Enfin des trucs cool! Le javascript!

Comme notre code est basé sur le framework JQuery il faut que vous téléchargiez la librairie ainsi que la sur-couche « interface » (vous pouvez télécharger les deux sur le site d’interface). Ajustez les noms avec votre fichier xhtml. Enfin créez votre fichier script.js. Je pense avoir suffisament commenté le code pour ne pas revenir dessus. Si vous avez des questions n’hésitez pas, un petit commentaire et je vous répond dans la journée!

EDIT : grâce à piouPiouM j’ai pu résoudre le problème du mouseover.

  1.  
  2. //on créé uen fonction pour rendre nos éléments draggable (merci piouPiouM ^^)
  3. function addDraggable(el){
  4. el.Draggable(
  5. {
  6. revert: true,
  7. zIndex: 1000,
  8. ghosting: true,
  9. opacity: 0.7
  10. }
  11. )
  12. };
  13.  
  14. $(document).ready(
  15. function()
  16. {
  17. //Nos élements draggable sont définis ici. Ce sont tous les éléments avec la class CSS ‘.drag’.
  18. addDraggable($(’.drag’));
  19.  
  20. //le div avec la class ‘.ingredient’ est notre première zone droppable. Elle contient nos ingrédients (original hein!).
  21. $(’.ingredient’).Droppable(
  22. {
  23. //elle accept les élément ayant la class ‘drag’
  24. accept : ‘drag’,
  25. //ici cela affecte des classes css suivant que la zone est active ou hover. Pratique pour changer de style au survol.
  26. //activeclass: ‘activeEmplacement’,
  27. //hoverclass: ‘hoverEmplacement’,
  28. //plusieurs zone de tolerance existe. Allez faire un tour sur la doc.
  29. //Ici nous choisissons de pouvoir dropper un élément quand le pointeur de la souri est dans la zone.
  30. tolerance: ‘pointer’,
  31. //on définit ce qu’il va se passer lorsqu’on drop un élément dans la zone. On passe l’élément draggé en parametre.
  32. ondrop: function (drag)
  33. {
  34. //on on récupère l’attribut recette si le drag en possede un
  35. var id_recette=$(drag).attr(’recette’);
  36. //si il en possède un on suprime le drag. Cela correspond à si un ingredient d’une recette est enlevé de sa recette.
  37. //supprimez le bloc et testez!
  38. if(id_recette){
  39. $(drag).remove();
  40. }
  41. },
  42. fit: true
  43. }
  44. );
  45. //Ici nous allons dropper nos ingrédient pour construire nos recettes.
  46. $(’.recette_ingredient’).Droppable(
  47. {
  48. accept : ‘drag’,
  49. activeclass: ‘activeEmplacement’,
  50. hoverclass: ‘hoverEmplacement’,
  51. tolerance: ‘pointer’,
  52. ondrop: function (drag)
  53. {
  54. //nous récuperons l’id de la recette. Il est contenu dans le div parent de la zone droppabe (alez revoir le xhtml ;-p).
  55. var id_recette=$(this).parents().attr(’id’);
  56. //on clone l’élément draggable. Cela permet de réutiliser un autre élément pour une autre recette!
  57. var drag1 = $(drag).clone();
  58. //nous ajoutons un attribut recette ayant pour valeur l’id de la recette.
  59. $(drag1).attr(’recette’,id_recette);
  60. //puis nous récuperons l’id de l’ingredient…
  61. var id_ingredient=$(drag1).attr(’id’);
  62. //…pour verifier qu’il ne soit pas déjà présent!
  63. if (!$(this).children().is(’#’ + id_ingredient)) {
  64. //s’il n’est pas présent on l’ajoute
  65. $(this).append(drag1);
  66. //on rend notre “clone” draggable
  67. addDraggable(drag1);
  68. //avec un petit effet pour l’apaprition :p
  69. $(drag1).fadeIn(”slow”);
  70. }
  71. },
  72. fit: true
  73. }
  74. );
  75.  
  76. }
  77. );

Voila! Cette première partie est fini! Je ferais bientôt la suite avec la sauvegarde de vos recettes dans une base de donnée grâce à l’ajax!

Si vous voulez que je détail un point précis demandez via un petit commentaire! Puis si vous avez aimé n’hésitez pas à le dire c’est toujours sympa et ça motive :p

Antoine

Passionné du web et de tout ce qui s'en rapproche, je tiens se blog sans prétentions pour vous faire partager mes découverte et mes interrogations sur le développement, le management, l'agilité, la gestion de projet.

Did you enjoy this post?

If so, would you please consider sharing it with the world

User Responses

26 Responses and Counting...

  1. Guiral antoine

    février 24, 2008

    je suis en train de la rediger :p je twit dès que j’ai fini!

    Edit : Ayééé il est en ligne —>> http://antoine.guiral.info/2008/03/09/tuto-jquery-drag-%e2%80%98n-drop-avec-sauvegarde-automatique-en-base-de-donnees-22/

  2. bruno bichet

    février 24, 2008

    Cool ce tuto sur jquery, exactement ce qui me manquait pour me mettre à l’ajax (vivemenent la deuxième partie, donc) :)

  3. Hoax rss

    février 24, 2008

    juste un petit mot pour te duire que tu gagnerais à être rceonnu par tous ;)

  4. Guiral antoine

    février 24, 2008

    Merci hoax Rss!

    J’essaye de me faire connaitre mais je t’assure que ce n’est pas facile :-) donc toute aides est la bienvenue! N’hésite pas à revenir et à en parler autour de toi ;-)

    A bentôt!!

  5. Alain

    février 24, 2008

    Merci pour ce script !

    J’ai voulu l’adapter mais ça bug sous IE6 et 7 ! Sur ton site teamManagerXV il est possible d’incrémenter les équipes mais impossible de sortir les joueurs ensuite (seuls les noms présents par défaut les peuvent). De plus, une fois sortis les noms par défaut il est impossible de dragger à nouveau les noms vers les équipes. Dommage car sous Firework ça roule super !
    Enfin, d’un point de vue esthétique il aurait été agréable d’avoir dès la sélection le curseur de déplacement.
    Que de critiques je sais, c’est facile, mais c’est important je pense.

    Bravo tout de même :-)

  6. Guiral antoine

    février 24, 2008

    Bonjour Alain,

    en effet sous IE (7 en tout cas dc surement sur le 6 :-D ) teamManager ne marche pas. Cependant le javascript de teamManager n’est pas celui du tuto…Je peux peut être essayer de le corriger pendant le week end mais je suis un peu débordé :s

    En ce qui concerne le curseur, si tu regarde dans la méthode droppable j’ai mis un commentaire qui parle des classes CSS au survol du drag. La solution est là ;-) .

    En tout cas je vas essayer de corriger le drag’n drop sur IE…

    Merci et à bientôt!

  7. Alain

    février 24, 2008

    J’imagine que tout cela prend du temps !

    En fait je suis plutôt webdesigner, je bidouille les scripts pour réaliser au plus près l’ergonomie que je souhaite.
    J’ai fait une longue recherche et ton script correspond le mieux à ce que je recherchais. Je n’ai pas réussi à faire fonctionner celui du tuto alors je me suis permis de récupérer le code de ton site qui a le grand avantage d’être en action :-) .
    Je suis en train de le fusionner avec un autre afin de pouvoir dragger aussi les boites de réception. Si cela t’interesse je pourrais te communiquer le lien du résultat.

    Bon week-end

  8. Guiral antoine

    février 24, 2008

    Si cela t’interesse je peux t’envoyer les sources du tuto (le script étant « mieux »). Pour le lien du résultat je me ferais un plaisir de te faire un backlink.

    Merci bon week end a toi aussi.

  9. Alain

    février 24, 2008

    Avec joie ! Tu peux utiliser l’adresse que j’ai inscrite pour laisser des commentaires.
    Je te tiendrai au courant de mes avancées.

    A bientôt

  10. Alain

    février 24, 2008

    Hello Antoine

    J’espère que ton weekend fut bon malgré que tu sois débordé actuellement. Par quel biais pensais-tu me faire parvenir les sources du tuto ? Je suis impatient de le tester car tu dis qu’il est mieux que celui que je trouve déjà très bien.

    Merci par avance

    Alain

  11. Pariaud

    février 24, 2008

    Bonjour,
    J’ai besoin d aide je débute en javascript, j’ai lu ton tuto,
    pourrai tu m’envoyer les scripts du tuto, j’aimerai mieu comprendre,
    merci d’avance

  12. Guiral antoine

    février 24, 2008

    salut pariaud, je ne suis pas sur que te donner les script tels quels t’aiderais beaucoup si tu débutes en JS…Par contre je veux bien répondre à tes questions :-)

  13. Romain DELEPINE

    février 24, 2008

    Bonjour, félicitations pour votre travail.

    Je n’arrive pas a trouver le fichier interface.js à ajouter.

    J’ai crée mon package en y mettant tout pour être sur que celui fonctionne mais rien ne fonctionne.

    Merci

  14. Romain DELEPINE

    février 24, 2008

    Je viens de trouver qu’il s’agissait d’un plugins extérieur.

    Merci tous de même

  15. fAg3t

    février 24, 2008

    La fonction addDraggable ne fonctionne pas sous IE pour un élément créé après le chargement de la page, quelqu’un aurait-il une solution à ce problème ?

  16. Antoine

    février 24, 2008

    Salut,
    la fonction fonctionne bien. Par contre, le plugin UI de jquery a changé et les noms de certaine méthode avec. Je ne peux pas au jour d’aujourd’hui corriger le tutoriel, mais en regardant la doc du plugin tu devrais t’en sortir.

  17. Far

    février 24, 2008

    Bonjour,
    Les scripts présentés m’intéressent mais malheureusement je n’arrive pas à les faire fonctionner (évolution de jQuery). Serait-il possible d’avoir les versions ‘interface.js + jquery.js » d’indiquées ? ou alors d’avoirs les fichiers à dispos ?
    Ca serait cool :)
    Merci et bonne continuation.

  18. Antoine

    février 24, 2008

    Bonjour Far, je suis au courant que les scripts présentés ici correspondent à d’ancienne version…Cependant je les ai mis à jour pour la publication d’un article dans Linux+ magasine de septembre. Je vais pouvoir mettre l’article a disposition sur le blog d’ici quelques jours (disons ce wend en comptant large ;) ). En attendant vous pouvez me contacter par mail : guiral.antoine[at]gmail[dot]com

    see ya

  19. Fabien

    février 24, 2008

    Bonjour!

    Il me tarde d’avoir la mise à jour du tuto par rapport aux évolutions de JQuery histoire d’arriver à faire fonctionner ce tuto qui a l’air de correspondre parfaitement à ce que je veux faire… :-)

  20. webtuto

    février 24, 2008

    salut merci pour l’aide
    tu peux m’envoyer la source de ce tuto a mon email ?
    car j’ai pas trouver interface.js :s

  21. Franck

    février 24, 2008

    Bonjour Guiral antoine,

    Je viens de suivre ton tuto, je le trouve très intéressant (surtout la partie 2 ^^), par contre lorsque j’ai voulu le faire, je n’ai pas obtenu le résultat attendu (aucun drag ‘n drop).

    J’aurais souhaité savoir s’il était possible d’avoir la source, afin de voir ou est(sont) mon(mes) erreur(s) :p

    En tout cas félicitation pour ton tuto, j’en parlerais autour de moi ;)

  22. PizzaToy

    février 24, 2008

    Salut,
    Dommage l’exemple n’est plus en ligne, le « TeamManagerXV » sur http://www.e-caveavin.com/rugby/gerer-effectif.php affiche :
    Erreur SQL !
    select * from rugby_club order by club
    Table ‘22860×2pxh.rugby_club’ doesn’t exist

    @

  23. adam

    février 24, 2008

    bonsoir,
    je vous remercie pour ce tuto, malheureusement j’ai pas arriver à faire le tuto;
    est il possible de m’envoyer le code source ? merci d’avance

  24. Antoine

    février 24, 2008

    Bonsoir, désolé je n’envoi pas les sources. Il existe une version plus récente de ce tutoriel sur le blog.
    A bientot ;)

  25. seb.49

    février 24, 2008

    Bonjour,

    Je n’arrive pas non plus à faire fonctionner ce code, je ne connais pas bien JQuery, je voulais le découvrir via cet exemple malheureusement, certaines choses ont apparement changées mais impossible de savoir quoi.
    Je ne trouve pas non plus la version plus récente de ce tutoriel sur le blog.

    Pouvez vous nous aider, nous indiquer ce qui a changé, faire remarcher ce code très intéressant.

    D’avance merci

  26. Antoine

    février 24, 2008

    Bonjour,
    la dernière version de ce tuto se trouve ici : http://antoine.guiral.info/2008/10/03/tuto-jquery-dragn-drop-avec-jquery-et-ajax-v2/.
    cordialement :)

Leave a Reply

Default User

Your Name

février 24, 2008

* Name, Email, and Comment are Required

Get Adobe Flash playerPlugin by wpburn.com wordpress themes