Effectivement,
AB notre démarche est formative et non productive, et je salut en passant notre ami
mojorisin qui a tout à fait raison de proposer sa solution qui s'inscrit tout à fait dans l'esprit. On va continuer néaumoins dans notre démarche pas à pas.
On était où? Ah, on a écrit le serveur paramétré, on l'a testé par appel d'URL simple , ça marche, on a écrit le client Ajax qui fait l'appel automatisé au serveur, ça marche, on a tout compris jusqu'à maintenant. Parfait, la suite alors:
Maintenant, on doit créer l'interface graphique qui représente le dispatching membres/équipes.
Voici, une première ébauche:
on suppose qu'on a dans la base 2 équipes avec 1 membre chacune :
Code : Tout sélectionner
INSERT INTO `membre` (`login`, `equipe`) VALUES
('m1', 'e1'),
('m2', 'e2');
L'interface client, doit afficher alors 2 cadres (div) pour représenter les 2 équipes e1 et e2
et dans chaque cadre apparaîtra 1 membre sous forme d'icône avec le nom du membre.
m1 dans le cadre e1 et m2 dans le cadre e2.
En dur, celà peut s'écrire en HTML comme ça:
Code : Tout sélectionner
<!-- Une équipe -->
<div id='e1' class="equipe"><b>e1</b><hr>
<!-- Un membre -->
<div id='m1' class="membre">m1</div>
</div>
<!-- Une équipe -->
<div id='e2' class="equipe"><b>e2</b><hr>
<!-- Un membre -->
<div id='m2' class="membre">m2</div>
</div>
Avec biensûr 2 classes de style CSS membre et equipe pour mettre en forme les objets div comme ça par exemple:
Code : Tout sélectionner
<style>
.equipe {width:200px; height:200px; border: 1px solid #eeeeee; background-image:url(equipe.gif); background-repeat:no-repeat; cursor:pointer; text-align:center; margin:10}
.membre {width:30px; height:30px; line-height:70px; border-style:none; background-image:url(membre.gif); background-repeat:no-repeat; cursor:pointer; ; text-align:center; margin:10}
</style>
Eu, tu remarques les 2 images equipe.gif et membre.gif, ils sont affichées par le style CSS en tant qu'images d'arrière-plan (background-image) pour représenter respectivement, l'espace équipe et l'icône membre.
Ok, tu suis ?
L'idée maintenant est de programmer un drag&drop sur chaque membre et cadre équipe
Le drag doit se faire sur les div membres et sera représenté par l'événement onMouseDown c'est à dire qu'on va programmer par javascript l'action de pression sur la souris en pointant un membre
Celà s'écrirait par exemple pour le membre m1 comme suit:
Code : Tout sélectionner
<div id='m1' onMouseDown="selectMembre(this);" class="membre">m1</div>
où la fonction qu'on a nommé "selectMembre(this)" est la procédure javascript qu'il faudra écrire pour programmer le drag.
Alors, que doit faire cette fonction? en principe au début l'utilisateur va pointer la souris sur le div d'un membre et va presser le bouton de la souris pour commencer le déplacement du membre, c'est ça le drag, et donc la fonction "selectMembre(this)" doit simplement mémoriser l'objet membre pointé c'est pourquoi on le lui a passé comme paramètre par le mot javascript "this" qui veut dire "l'objet en cours"
Effectivement, puisque c'est le div membre qui déclenche le "onMouseDown" le "this" dans la fonction "selectMembre(this)" lui fait référence. on passe donc la référence de l'objet membre à cette fonction qui doit tout simplement le mémoriser dans une variable globale pour le marquer comme membre sélectionné.
Cette technique permettra plutard au contexte "drop" de savoir quel membre a été pointé et donc sujet du déplacement.
Voici donc l'algorithme de la fonction "selectMembre(this)" :
Code : Tout sélectionner
<script>
//CODE POUR LE DRAG&DROP
//mémoire globale d'un membre sélectionné
var membre_select = null;
//fonction pour sélectionner le membre pointé = commencement du drag&drop
function selectMembre(membre){
membre_select = membre;
}
</script>
Voilà la signature de la fonction selectMembre, elle recevra dans le paramètre "membre" un objet membre transmis par "this" par le onMouseDown et le mémorisera dans la variable globale "membre_select"
L'intérêt de la variable "membre_select" est qu'elle est visible par toutes les fonctions javascript du document. On l'utilisera alors dans la fonction à venir qui s'occupera du "drop" c'est à dire quand l'utilisateur pointera sa souris toujours préssée sur un cadre équipe en vue de déplacer le membre qu'il a sélectionné.
As tu compris? as-tu des questions, jusque là?
Ou sinon tu peux toujours attendre sadeq, il va bientôt reviendre !
