Drag and drop poussé

Eléphant du PHP | 206 Messages

20 mars 2011, 21:40

Bonjour à tous,

Dans le cadre de mon projet de gestion d'une équipe de Basket, je me penche sur un systeme plus intuitif pour le visiteur afin de composer son équipe. Pour cela je pensais pouvoir glisser les joueurs sur un terrain
Voici une image illustrant ce principe :

Image


J'imagine donc qu'il faut utiliser du javascript et plus particulierement le drag and drop, j'ai vu pas mal de tutoriel la dessus (afin de déplacer un élément sur une page), mais moi il faudrait que quand on clique sur "Envoyer composition" ça puisse savoir quelle élément à été déplacé a quel endroit afin de sauvegarder quel joueur est a quel poste dans ma base de donnée (mysql)..

Est ce que cela est possible en javascript ? Si oui, avez vous quelques pistes ou liens à me donner ?

D'avance merci,

Bon fin de dimanche à tous !
Cherche graphiste ou designer pour jeu en ligne de gestion d'une équipe de Basket. Projet fini N'hésitez pas à me contacter

ViPHP
ViPHP | 3607 Messages

21 mars 2011, 09:48

Bonjour,

Un coup d'oeil peut déjà être jeté par ici : http://jqueryui.com/demos/draggable/ et également ici : http://jqueryui.com/demos/droppable/
Ensuite pour récupérer la position, un début de réponse ici : http://stackoverflow.com/questions/1646 ... draggables

Mammouth du PHP | 568 Messages

24 mars 2011, 00:11

Bonjour,

Un coup d'oeil peut déjà être jeté par ici : http://jqueryui.com/demos/draggable/ et également ici : http://jqueryui.com/demos/droppable/
Ensuite pour récupérer la position, un début de réponse ici : http://stackoverflow.com/questions/1646 ... draggables
+1

Il est possible de cloner un élément lors du drop avec JQuery, je te conseille de bien fouiner la démo.

Ce qui te permet d'avoir ta liste de joueur en dessous de ton terrain de basket, tu défini les points sur le terrain comme étant droppable et lorsque tu drop une image d'un joueur de type draggable, tu le clone en le mettant à la position de ton point (en ajoutant une classe .selected par exemple, Cf. ci-dessous)

Pour récupérer les joueurs positionnés, il te suffit de faire un toArray sur une classe (ta classe défini lors du drop/clonage = .selected), ce qui te permet de récupérer en javascript un tableau d'élement.

Avec des id bien définis et des classes css, tu le peux le faire assez facilement.

EDIT: ce n'est qu'une façon de faire, tu peux aussi stocker les id des joueurs lors du drop dans un tableau. etc...

Eléphant du PHP | 206 Messages

29 mars 2011, 18:48

Pour commencer, merci beaucoup de vos premières réponses !

Effectivement ces exemples correspondent plutot pas mal à ce que je souhaite faire (en rajoutant quelques trucs).

Mais le javascript est un langage que je ne maitrise pas, et j'ai l'impression que réussir à comprendre les codes des démonstrations puis pouvoir y ajouter toutes les fonctionnalités que je souhaite risque d'être un long et laborieux travail non ?
Cherche graphiste ou designer pour jeu en ligne de gestion d'une équipe de Basket. Projet fini N'hésitez pas à me contacter

ViPHP
AB
ViPHP | 5818 Messages

29 mars 2011, 19:23

Ben oui mais ce que tu souhaites faire n'est pas simple non plus.

Et d'ailleurs même pour quelqu'un qui s'y connait (en javascript) ça demande également pas pal de temps, à moins de l'avoir déjà fait.

Remarque que tu pourrais faire beaucoup plus simple avec un formulaire php bien fait.

Mais si tu veux tout au top, il faut t'en donner les moyens :wink: