Déplacer des éléments dans une page

Ancien membre
Invité n'ayant pas de compte PHPfrance

24 juin 2018, 09:28

Bonjour à tous ! :)

Je suis à la recherche d'une solution pour déplacer des éléments d'une page (des div par exemple) et que ces éléments gardent leur position à chaque session. Je suis tomber sur un concept appelé Drag & Drop mais c'est pas exactement ce que je voudrais. Peut être en savez vous plus que moi à ce sujet ?

Caractéristiques de ma recherche :

- Les éléments html peuvent être déplacer dans la page (draggable)
- Les éléments html doivent sauvegarder leur position en fin de session

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

24 juin 2018, 19:03

Alors pour faire des éléments déplaçable dans une page, le plus simple est d'utiliser draggable de la librairie jQueryUI :
https://jqueryui.com/draggable/

Pour enregistrer la position de l'évènement, le principe est que dès qu'un utilisateur déplace un élément, tu fais l'enregistrement quand il le relache sur la page.
Pour savoir quand l'utilisateur finit de déplacer un élément, JqueryUI déclenche à chaque fois un event "stop" cf exemple ici :
http://api.jqueryui.com/draggable/#event-stop


Ensuite il te faudra faire la fonction qui enregistrera la nouvelle position.
- Soit tu le fais dans un cookie (mais du coup si l'utilisateur change d'ordi ou vide ses cookies, les éléments reviendront à leur emplacement initial)
- Soit tu le fais en base de données si l'utilisateur est identifié (et là ça sera rattaché de façon permanente à son profil)

Pour les cookies, tu peux utiliser la librairie js-cookie qui est très simple à utiliser :
https://github.com/js-cookie/js-cookie

Pour le faire en base de données, (c'est plus compliqué) il faudra que tu fasses un appel vers le serveur en indiquant en paramètre la nouvelle position ainsi que les infos d'identification de l'utilisateur.
http://api.jquery.com/jQuery.get/
Puis côté serveur il faut que tu développes un script (en PHP par exemple) qui va l'enregistrer en base de données
Quand tout le reste a échoué, lisez le mode d'emploi...