Cette fois, vous allez apprendre comment créer des zones de réception pour les éléments déplaçables.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Profitez facilement du glisser déposer sur vos éléments avec le Framework jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
Toujours avec l’extension jQuery UI, voici la deuxième partie consacrée au glisser/déposer, au drag and drop, dans le cours précédent nous avons vu ensemble les éléments draggables, déplaçables, là dans ce cours on va voir ensemble les éléments droppables, là où c’est les zones de réception, ce que j’appelle la zone droppable c’est en français la zone de réception.
Le glisser/déposer
Sur une div, sur une image, sur ce que vous voulez, utilisez la méthode jQuery UI droppable pour créer une zone de réception, vous aurez un élément draggable qui se déplace sur une zone droppable, on peut le poser, une zone de réception, tout simplement.
Les options s’est sensiblement les mêmes que draggable, vous les connaissez sinon je vous renvoie au cours précédent ou j’ai listé toutes les options, ici elles sont toutes listées, il suffit de mettre la vidéo sur pause, c’est en français, j’ai mis des exemples pour les utiliser, tout simplement, je passe vraiment très vite sur toutes les options parce que vous les connaissez maintenant par cœur surtout si vous avez vu le cours précédent.
Les méthodes – le glisser/déposer
Les méthodes ce sont exactement les mêmes, avec destroy, disable, enable, et option, vous avez la méthode widget également.
Les événements – le glisser/déposer
Les événements c’est les mêmes avec activate, create, deactivate, drop, out, over. Out ça se déclenche lorsque un élément déplaçable quitte la zone de réception et over c’est lorsqu’un élément déplaçable survole la zone de réception. Il y a deux nouveaux événements par rapport à draggable, voilà je vous les listes.
Le glisser/déposer
Et vous avez l’option activeClass qui permet de mettre en évidence la zone de réception grâce à une classe CSS, l’utilisateur prend un élément il veut le déplacer, la zone de réception va être en surbrillance pour lui indiquer qu’il peut le poser ici, tout simplement. Vous pouvez ajouter une confirmation pour l’utilisateur, pour confirmer qu’il veut déplacer l’élément dans la zone de réception, vous pouvez confirmer. Vous avez l’option accept qui permet de spécifier parmi les éléments déplaçables, vous avez plusieurs éléments qui se déplaces, ils ne vont pas tous dans la zone de réception, l’option accept permet de gérer ça, l’option tolérance qui prévoit plusieurs valeurs pour déterminer le comportement de l’élément déplacé, s’il est valide, zone de réception élément, on le pose, ce n’est pas valide le déplacement, là il est valide le déplacement, c’est la tolérance.
Revert ça permet de faire revenir l’élément déposé à sa position initiale, tout simplement. Vous pouvez personnaliser le themeroller, utilisez themeroller si vous voulez personnaliser différents éléments.
Alors on voit le code source ensemble, vous reconnaissez du cours précédent, ces deux zones qui se déplaces avec l’axe horizontal et l’axe vertical dans une zone, avec le curseur qui change, là pareil le curseur change, et là on peut le déposer, déplacement réussis, déposez-moi ici, là, c’est bon, la couleur change, on peut le déposer. Là, le dépôt ne fonctionne pas et là il fonctionne. Et tout ça c’est géré, on définit une zone de drop ici, c’est une simple div la zone de drop, avec sa taille, on a toujours notre zone area, et on définit l’élément droppable avec overClassActif, il y a une classe CSS active pour définir le couleur de fond quand il est actif, quand l’élément est juste au-dessus, là, zone active, on ne peut pas le déposer, on peut, on ne peut pas, on peut.
Vous avez également … on écoute l’événement drop pour dire déplacement réussi, le déplacement est réussis, lorsqu’il y a un déplacement en cours pour activer, voilà, déposez-moi ici, parce que si on charge la page une première fois, ce n’est pas en italique et dès que je vais dire, ça passe en italique. Toujours les mêmes zones draggables, le curseur move, voilà.
Votre plan d’actions !
Je ne vais pas dire que c’est enfantin, en tout cas ce n’est pas très compliqué, un code relativement court pour faire une zone complètement déplaçable avec des éléments, des zones de réceptions, des éléments déplaçables dans votre site internet. Si vous avez des questions posez-les directement sous ce cours vidéo, sur Développement Facile sous le cours vidéo vous pourrez télécharger le code source complet et commenté, comme ça vous aurez les modèles qui fonctionnes pour les réutiliser sur votre site internet, Je vous invite dès maintenant à cliquer, il y a une image vidéo 2 au-dessus de cette vidéo ou en-dessous, dans la vidéo 2, je vais vous expliquer comment tirer tout le potentiel des frameworks jQuery, framework Dojo, l’extension jQuery Ui, vous allez apprendre à les utiliser à travers une multitude d’exercice, tout est expliqué en détail dans la vidéo 2 comment je vous accompagne personnellement, cliquez sur l’image en haut, vidéo2, et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple drag and drop jQuery UI
Retrouvez le code source commenté pour créer des zones de réception d’éléments déplaçables depuis jQuery UI.
Téléchargement du code source Exemple drag and drop jQuery UI
