Profitez facilement du glisser déposer sur vos éléments avec le Framework jQuery UI

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Et voici la suite du cours précédent sur le glisser / déposer avec le Framework jQuery UI.

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 – le glisser/déposer

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.

Downloads

  • Exemple drag and drop jQuery UI
    Exemple drag and drop jQuery UI

    Code source commenté pour utiliser le glisser / déposer du framework jQuery UI.
    Le fichier zip contient également jQuery UI version 1.10.4 et jQuery version 1.10.2

Posez vos questions sur ce cours jQuery UI

Utilisez la zone des commentaires pour poser vos questions sur ce cours jQuery UI.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS