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”>
  24. </div>
  25. </div>
  26. <div class=”recette” id=”r_2″>
  27. <h3>Pâte brisée</h3>
  28. <div class=”recette_ingredient”>
  29. </div>
  30. </div>
  31. </div>
  32.  
  33. </body>
  34. </html>
  35.  

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}
  4.  

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. );
  78.  

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

Partagez cet article :
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • co.mments
  • De.lirio.us
  • Live
  • Ma.gnolia
  • Pownce
  • Scoopeo
  • Technorati
  • TwitThis
  • Wikio FR
  • e-mail
  • Wikio

Autres articles intéressants :

Articles les plus actifs :