Utilisez le drag and drop avec le Framework JavaScript jQuery UI

Le glisser/déposer (drag / drop) est une fonctionnalité présente dans de nombreuses pages web : par exemple les sites eCommerce.

jQuery UI sépare ces opérations avec une librairie pour le mouvement de l’objet (draggable) et une autre pour le dépôt de l’item déplacé (droppable).

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Utilisez le drag and drop avec le Framework JavaScript jQuery UI

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouveau cours consacré au plug-in jQuery UI et là vous allez apprendre à utiliser le fameux drag and drop ou en français, glisser et déposer.

Le glisser/déposer

Dans les boutiques e-commerce, on voit souvent, on prend un élément, on le dépose dans le panier directement, ça fait des effets assez sympas très visuel en principe, les internautes aiment beaucoup c’est visuel, c’est simple à utiliser. Pour rendre un élément déplaçable, il suffit de lui associer la méthode jQuery draggable, que vous mettez sur une div, sur le paragraphe, vous appliquez la méthode draggable et votre élément sera déplaçable.

Les options – Le glisser/déposer

Vous avez plusieurs options comme addClasses, appendTo, axis, vous pouvez limiter un déplacement, au lieu de d’avoir un déplacement dans l’espace, vous pouvez limiter un déplacement horizontal ou vertical, cancel, connectToSortable.

Vous avez également containment sa force l’élément déplaçable à rester dans les limites d’une zone, vous pouvez mettre une div et votre élément dans une autre div, comme ça, il ne pourra pas sortir de de la zone, cursor vous pouvez modifier le curseur CSS de la souris pendant le déplacement, cursorAt c’est pour donner une position au curseur et delay c’est le temps des secondes avant que le déplacement débute.
Je passe volontairement vite sur ces options, tout est expliqué, il y a toujours un exemple sur la vidéo, il suffit de la mettre en pause, de lire les indications, dans le code source je vais tout vous expliquer, et vous allez voir c’est facile à implémenter. Disable, distance, grid, vous pouvez mettre un guide avec helper, handle, le guide c’est comme pour les éléments redimensionnables, ça va cloner l’élément que vous déplacez.
iFramFix pour empêcher que le déplacement de la souris soit capturé par une balise iFrame, opacity vous pouvez modifier l’opacité de l’aide visuelle au déplacement, refreshPosition, revert, revertDuration, une fois que vous avez déposé l’élément il revient à sa position initiale.

Scope, scroll, scrollSensitivity, scrollSpeed la vitesse de défilement, vous avez vraiment tout un tas d’options avec le drag and drop, ce sera à vous de les regarder, si je vous les listes toutes dans le détail, déjà la vidéo va être un peu ennuyante pour vous, alors qu’il suffit de mettre sur pause et de lire, tout est en français, tout est très bien expliqué, toujours avec des exemples.

Les méthodes – le glisser/déposer

Vous avez les méthodes habituelles, destroy, disable, enable, option. Vous avez widget également aussi.

Les événements – Le glisser/déposer

Les éléments que vous connaissez, create, drag, un nouvel événement, ça se déclenche pendant le déplacement, start c’est lorsque le déplacement débute, stop c’est lorsque le déplacement s’arrête.

Le glisser/déposer

Voilà le type d’événements, donc l’option cursor ça permet de modifier le curseur si vous faites un déplacement uniquement horizontal ou vertical avec les deux petites flèches, ou les quatre flèches en croix, pour un déplacement partout dans l’espace, cursorAt vous pouvez personnaliser le positionnement du curseur, bien évidemment. helper ça donne une aide à l’utilisateur pour visualiser le déplacement, axis pour limiter le déplacement sur l’axe horizontal ou vertical, et vous pouvez cloner aussi l’objet à déplacer.

Revert c’est avec revertDuration, quand l’utilisateur il lâche l’élément, il revient à sa position initiale, bien évidemment vous pouvez personnaliser le thème en utilisant themeroller.

Exemple d’éléments drag and drop

On passe ensemble au code source, là il y a une zone qui délimite tout par exemple, il se déplace, on change le curseur et il se place uniquement sur l’axe horizontal celui-là, par contre il peut sortir de la zone, il n’y a pas de problème, celui-là il ne peut pas sortir de la zone, il est bloqué, il se déplace uniquement sur l’axe verticale, par contre celui-là le curseur est différent, on peut le déplacer partout mais il est limité par la zone, il ne peut pas sortir.
Voilà, dans le code comment on fait ?
On crée nos trois div c’est très simple. La div, la zone area, ici, bien évidemment, on a défini une largeur, une hauteur, une bordure, et des divs qui sont draggables, déplaçables tout simplement, on met du texte, vous pouvez mettre une image, ce que vous voulez en fait, vous pouvez même rendre une image déplaçable, je ne l’ai pas mis mais vous pouvez utiliser une image comme dans les boutique en ligne qui se déplace, et après vous définissez les tailles pour vos divs, comment vous faites ?
Draggable et vous avez toutes les options derrière pour dupliquer l’élément le faire revenir à la position initiale, le déplacement, là les curseurs qui changes, containmentParent c’est pour délimiter les zones limites sur le parent, et le parent c’est area si on regarde ici, la div area qui est au-dessus des autres.
Voilà un peu ce que ça donne, vous voyez que c’est simple à implémenter, très pratique, facile à utiliser, le déplacement d’éléments il n’y a pas beaucoup de lignes de code, là c’est pour l’aide, je vous inviterais, vous pouvez dé commenter toutes les options, les tester, voilà, tout simplement.

Votre plan d’actions !

Comme d’habitude maintenant c’est à vous de jouer, sur Développement Facile sous ce cours vidéo vous trouverez le code source en téléchargement avec tous les commentaires, comme ça vous pourrez dé commenter toutes les options, les tester en direct dans vos sites Internet, dans vos applications, si vous avez des questions posez-les directement sous la vidéo, je vous invite, il y a vidéo 2, aller voir la vidéo 2, il y a une image avec la vidéo 2, je vous explique comment vous pouvez bénéficier de mon accompagnement personnalisé et individuel pour apprendre les possibilités du framework jQuery, du framework Dojo, l’extension jQuery UI, vous allons voir tout ça ensemble, il suffit de cliquer sur l’image vidéo 2 au-dessus de cette vidéo, ou en-dessous, et on se retrouve très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple Drag & Drop jQuery UI

Et voici le code source du glisser / déposer avec le framework jQuery UI.

Posez vos questions sur ce cours

Vous avez des difficultés, des problèmes avec ce cours jQuery UI, posez vos questions ci-dessous dans les commentaires.