Tutoriel Vidéo jQuery : jQueryUI Sortable

Dans ce tutoriel vidéo vous apprendrez à créer un système de réorganisation en Javascript avec jQuery et jQuery UI. Plus précisément le cadre de ce tutoriel sera la création d'un système intuitif qui permettra de réorganiser des catégories facilement à l'aide de glissé déposé.


Télécharger la vidéo
(Réservé aux premiums)

Télécharger les sources
(Réservé aux premiums)


Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.

Vous aimerez aussi

localStorage

localStorage
14m

Le localStorage vous permet de sauvegarder des informations directement...

Plupload

Plupload
1h6

Dans ce tutoriel vidéo vous découvrirez comment utiliser le plugin...

23 commentaires
Ajouter un commentaire

cornelius Il y a 2 mois Répondre

je galère sur un point :
Que le <li> soit déplacé ok Mais que la zone qui serve a faire glisser mon <li> soit un lien et non le <li> lui même !

El garch Il y a 6 mois Répondre

Encore une fois Bravo, Merci beaucoup pour le tuto

beegees Il y a 9 mois Répondre

Ce code ne fonctionne pas avec Internet Explorer ! Auriez-vous une solution pour que cela fonctionne avec IE ? Merci d'avance.

zvetlania Il y a 1 an Répondre

troop sympa merci Grafikart

noob4ever Il y a 2 ans Répondre

Salut, je me permet de mettre un lien pour ceux qui comme moi galère avec l'ajax pour avoir "le" résultat top qu'on recherche:
http://www.infiniclick.fr/blog/article-12-classement-avec-jquery-et-ajax.html
:)

noob4ever Il y a 2 ans Répondre

Trop bien ce tuto encore

Rebekos Il y a 2 ans Répondre

je n'ai pas compris l'ajout de ui.item.parent(ul).sortable('serialise') ?
Ca fonctionner bien que avec ui.item.parent(ul)

Rebekos Il y a 2 ans Répondre

Merci !

Anonyme Il y a 2 ans Répondre

Bravo pour ce super tuto !

Bonne continuation

Emporio Il y a 2 ans Répondre

Juste un truc quand tu fait if(!empty($_POST)) il y a pas mieux comme faille. On peut facilement changer le nom des variables en créant un formulaire qui pointe vert cette page, des données sont posté mais tes variables existe pas = erreur = je trouve l'acces a la bdd (pi têtre ^^ )

XnEoZ Il y a 2 ans Répondre

Merci pour le site jQuery UI je ne le connaissais pas. Sinon Quelle Éditeur de développement utilise tu dans ton tutoriel ?

Badbart Il y a 2 ans

Komodo Edit

XnEoZ Il y a 2 ans - Répondre

Merci

bol3ez Il y a 2 ans Répondre

salut vraiment c'est intéressante cette vidéo et j'ai appris tant de choses !
mais j'ai un problème que je voulais y éviter :
j'ai essayé de travailler avec le widget Datepicker mais le problème c'est que je n'arrive pas a rendre cette calendrier dynamique.. d'une autre façon je veux que lorsque je clique sur une date spécifique il m'indique l'évènement enregistré(dans la base) associé a cette date..
est-ce-qu'il y a une explication ou un tutoriel a propos de ça ?
merci d'avance.

Grafikart Il y a 2 ans - Répondre

Ton cas est assez spécifique il faut que tu te renseigne sur l'ajax et l'état "onChange" de jquery afin de réussir à faire ce que tu souhaite.

basketteur-33 Il y a 2 ans Répondre

GENIALLLLLLLLLLLLLLLLLLLL!

lioninho 11 Il y a 2 ans Répondre

Encore un tuto génial. Vraiment Jonathan on devrait porter plainte contre toi, pour exces de super tutoriels. lol !

Selim Il y a 2 ans Répondre

Merci pour ce tuto, ça m'a fait gagner du temps

bast_65 Il y a 2 ans Répondre

petite erreur, j'ai oublier de mettre toute la syntaxe c'est ui.item.parent(ul).sortable('serialise') qui vous permet d'avoir une sorte de formulaire

Grafikart Il y a 2 ans - Répondre

Merci pour la fonction, je ne m'étais jamais penché sur les méthodes de "sortable"... Ici ça n'a pas de grande utilité mais pour l'Ajax ça prend tout son sens

bast_65 Il y a 2 ans Répondre

.sortable possede une option pratique, le 'serialise' qui permet de récupéré facilement l'ordre des bloc: ui.item.parent(ul) permet d'avoir un style de formulaire près a être envoyer en ajax, il découpe vos id de <li> a l'endroit ou vous mettez un "=", "-" ou "_" et renvoi par exemple "liste_1" sous forme liste[]=1&... .Sinon le toArray peut aussi etre pratique, il vous retourne un tableau style result[0] = id du premier élément etc... tout est dans la documentation (ironie d'alleur, en se moment leur javascript ne fonctionne pas :D)

tibeoh Il y a 2 ans Répondre

J'adore ! Encore bravo.

Lambda Il y a 2 ans Répondre

Super sympa cette animation, et très pratique.

( C'est pYthagore et pas pIthagore :P )

leknoppix Il y a 2 ans Répondre

Super tuto comme toujours.
Le théorème de pithagore n'existe pas, mais le théorème de pythagore oui! a^2+b^2=c^2

darkn1ko Il y a 2 ans Répondre

Finalement j ai réussi a limiter le nombre de drop. je sais pas si tu avais recu mon mail concernant mon problème.

ladylain Il y a 2 ans Répondre

First ! pas mal ! ca sert toujours de savoir ces petits effets ^^

TeddyDu44 Il y a 2 ans Répondre

1st! merci à toi pour tout ces tuto!!!! aujourdhui aussi le tuto sur la poo ?

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.