Page 1 sur 1

Drag and drop poussé

Posté : 20 mars 2011, 21:40
par Snipy
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 !

Re: Drag and drop poussé

Posté : 21 mars 2011, 09:48
par jojolapine
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

Re: Drag and drop poussé

Posté : 24 mars 2011, 00:11
par Yosh
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...

Re: Drag and drop poussé

Posté : 29 mars 2011, 18:48
par Snipy
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 ?

Re: Drag and drop poussé

Posté : 29 mars 2011, 19:23
par AB
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: