Glisser-déposer avec jQuery UI

Avant d'aller avec quelques exemples pratiques, jetons un coup d'œil aux méthodes Drag and Drop que jQuery UI a pour nous.
1- Méthode déplaçable ()
La méthode draggable gère les éléments d'une page HTML que vous souhaitez déplacer, cette méthode peut être utilisée de deux manières différentes :

 • $ (sélecteur, contexte) .draggable (options) • $ (sélecteur, contexte) .draggable ("action", paramètres) 

Voyons un exemple :
Nous devons d'abord inclure les fichiers nécessaires, une erreur courante est d'inclure le jQuery UI .js avant le jQuery .js, rappelez-vous que jQuery est le noyau et que jQuery UI ne sont que des bibliothèques, des plugins, des widgets, qui sans jQuery ne travaillerait.

On invoque la méthode :

 $ (function () {$ ("#draggable") .draggable ();}); 

Et on l'associe au sélecteur qui sera le div avec.

Traîne-moi

Voici le code source complet :

 jQuery UI Draggable - Fonctionnalité par défaut
Traîne-moi

2- méthode dropable ()
La méthode droppable gère les éléments d'une page HTML que vous souhaitez déposer dans une zone. Comme la méthode déplaçable, elle peut être utilisée de deux manières différentes :

 • $ (sélecteur, contexte) .droppable (options) • $ (sélecteur, contexte) .droppable ("action", paramètres) 

Regardons un exemple de ceci :
Nous incluons les fichiers, nous ajoutons les styles, nous invoquons les méthodes (ici nous utiliserons également la méthode draggable) suivie de la méthode droppable. Voici le code source :

 jQuery UI Droppable - Fonctionnalité par défaut
Traîne-moi vers ma cible
Déposer ici

Et ce serait notre sortie dans le navigateur :

Et si nous rassemblions les deux concepts dans un exemple plus compliqué, quelque chose comme un panier d'achat ? Voyons:
Nous incluons d'abord nos fichiers :

Nous ajoutons quelques styles à notre panier :

Nous utiliserons également la méthode accordéon() de la bibliothèque jQuery UI pour rendre notre panier plus attractif, nous invoquons nos méthodes et les associons aux sélecteurs, dans ce cas nous étendrons toutes les fonctionnalités de la méthode déplaçable à une liste :

Et voici à quoi ressemblerait notre panier :

Pour que vous puissiez le tester, voici le code source complet :

 jQuery UI Droppable - Démo de panier d'achat
T-shirts

Chemise Lolcat
Chemise Cheezeburger
Chemise Buckit


Sacs

Zèbre Rayé
Cuir noir
Cuir d'alligator


Gadgets

iPhone
iPod
iPad


Ajoutez vos articles ici

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif