<script>
          /**
         * Moteur Ajax
         */       
         function getXhr(){
            var xhr = null;
            if(window.XMLHttpRequest) // Firefox et autres
               xhr = new XMLHttpRequest();
            else if(window.ActiveXObject){ // Internet Explorer
               try {
                         xhr = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                         xhr = new ActiveXObject("Microsoft.XMLHTTP");
                     }
            }
            else { // XMLHttpRequest non supporté par le navigateur
               alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
               xhr = false;
            }
          return xhr;
         }
         
          /**
         * Méthode qui appelle un script serveur et renvoit sa réponse
         *
         * serveur: l'url du script serveur appelé
         * reponse: objet HTML donné par référence à un conteneur HTML de la page chargée
         * paramètres: liste des paramètres éventuellement passés au script serveur (param1=valeur1&param2=valeur2...)
         **/
         function getByAjax(serveur, reponse, methode, parametres){
           var xhr = getXhr(); //Nouvelle instance Ajax
           if (xhr && serveur){
            // On défini la fonction observant la communication Ajax/serveur
            xhr.onreadystatechange = function(){
               // le code 4/200: détermine que Ajax a reçu une réponse du serveur
               if(xhr.readyState == 4 && xhr.status == 200){
                  reponse.innerHTML = xhr.responseText;  //renvoit la réponse du serveur dans le conteneur reponse
               }
             }

             // Déclenchement de l'appel Ajax/serveur + envoi paramètres POST ou GET
             if (methode == "POST"){
            xhr.open("POST", serveur, true);
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
               xhr.send(parametres);
          }
          else {
            xhr.open("GET", serveur+"?"+parametres, true);
               xhr.send(null);             
          }
           }
        }
</script>
<!-- Div de réponse Ajax -->
<div id="div_reponse"></div> 

<?php
//équipes/membres de la base
if (file_exists('../bzw.php')){
    include('../bzw.php');
    $connexion = mysql_connect($host,$user,$password) or die("connexion impossible au serveur");
    mysql_select_db($database,$connexion) or die("la base de donnée n'a pas pu être ouverte");
    //Lister tout: les équipes connues et les membres ayant une équipe ou non
    $requet = " (SELECT equipe.id as equipe, login FROM equipe left join membre on equipe.id=membre.equipe GROUP BY equipe.id, login ORDER BY equipe.id, login)
                UNION 
                (SELECT equipe, login FROM membre WHERE isNull(equipe) or equipe='' GROUP BY equipe, login ORDER BY equipe, login)";
    $result = mysql_query($requet,$connexion);
    //Lire les membres et les grouper par équipe dans un tableau
    while ($result && ($row = mysql_fetch_assoc($result))) {
        $equipe = trim($row["equipe"]);
        $login = trim($row["login"]);
        //Créer un tableau pour des équipes connues même si aucun membre 
        if ($equipe!="") $equipes["$equipe"][] = $login;
        //Créer un tableau pour les membres sans équipe même si aucun membre 
        $equipes["Sans équipe"][] = !$equipe?$login:"";
    }
    //trier le tableau pour que la branche "Sans équipe" soit tassée vers la fin
    array_multisort($equipes);
}
//Lire et afficher le tableau des équipes et leurs membres
if (is_array($equipes)){
  $i=0;
  echo "<table width='100%' border='0'><tr>";
  //Afficher les cadres d'équipes
  foreach($equipes as $equipe=>$membres){
    //Afficher 4 équipes par ligne
    if ($i>0 && $i%4==0) echo "</tr><tr>";
    //Distinguer le groupe des membres sans équipe (id null)
    $equipe_Id = $equipe!="Sans équipe"?$equipe:"null";
    $equipe_Nom = $equipe;
    echo "<th>
        <div id='$equipe_Id' onMouseUp='placeMembre(this);' class='equipe'><b>$equipe_Nom</b>
        <hr><table id='table_$equipe_Id' width='100%' border='0'><tr>";
    $j=0;
    //Afficher le membre de chaque cadre équipe
    foreach ($membres as $membre)
    {
      //Afficher 4 membres par ligne
      if ($j>0 && $j%4==0) echo "</tr><tr>";
      if ($membre){
        $membre_Id = $membre;
        $membre_Nom = $membre;
          echo "<th class='cell'>
              <div id='$membre_Id' onMouseDown='selectMembre(this);' class='membre'>$membre_Nom</div></th>";
      }
      $j++;   
    }
    echo "</tr></table></div></th>";
    $i++;
  }
  echo "</tr></table>";
}
?>

<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;
}

//fonction pour placer le membre dans une équipe = fin du drag&drop
function placeMembre(equipe){
    if (equipe && membre_select) {
        //Affectation du membre sélectionné dans l'équipe pointé dans la base de données par Ajax
        getByAjax('affecter.membre.serveur.php', document.getElementById('div_reponse'), 'GET', 'equipe='+equipe.id+'&login='+membre_select.id);
        
        //Placement de l'objet membre dans l'objet équipe
        membre_select.style.position = ""; //ancrer sa position
        insertCellToTable("table_"+equipe.id, membre_select, 4); //l'insérer dans la table de destination
        
        //Effacer la sélection en cours = terminé
        membre_select = null;
    }
}

//fonction d'insertion d'une nouvelle céllule dans une table HTML
function insertCellToTable(tableId, contentCell, defaultCols){
    //Propriétés de la table ciblée
    var table = document.getElementById(tableId);
    var rows = table.rows.length;
    var cols = defaultCols;
    //Céllule recherchée pour l'insertion du contenu
    var cell = null;
    //Recherche de la position d'insertion = première céllule libre ou à la fin de la table
    var r=0;
    //Parcourir les lignes
    while (r<rows && cell == null) { 
        var c=0;
        //Et les colonnes 
        while (c<cols && cell == null){
            //si la céllule en cours est la dernière
            if (table.rows[r].cells[c]==null) {
                //en ajouter une nouvelle
                cell = table.rows[r].insertCell(-1);
            }
            //sinon si vide la réutiliser
            else if (table.rows[r].cells[c].innerHTML=="") cell = table.rows[r].cells[c];
            c++;
        }
        r++;
    } 
    //A la fin de la recherche si cell est toujours introuvable, ajouter une nouvelle ligne et céllule
    if (cell == null) {var row = table.insertRow(-1); cell = row.insertCell(-1);}
    //Et finalement placer le contenu dans la céllule cell (existante ou nouvelle)
    cell.appendChild(contentCell);
    //Formater la nouvelle céllule par une classe CSS
    cell.className = "cell";
}

//fonction événementielle pour désactiver la sélection du texte dùe au drag&drop
document.onmousedown = function (){
    document.onselectstart=function() { return false; }; //IE
    return false; //FF
}

//fonction événementielle pour annuler le drag&drop
document.onmouseup = function (){
    membre_select.style.position = "";
	membre_select = null;
}

//fonction événementielle pour déplacer le membre selon les XY de la souris en mouvement = milieu du drag&drop
document.onmousemove = function deplaceMembre(e)
{ 
    //XY de la souris
    var x, y;
    //IE
    if (window.event){ x = window.event.x;  y = window.event.y;}
    //FF
    else { x = e.clientX; y = e.clientY; }
    //Déplacer le membre sélectionné aux XY
    if (membre_select && x && y){
        membre_select.style.position = "absolute"; 
        membre_select.style.top = y - 5; 
        membre_select.style.left = x - 5;
        membre_select.style.zIndex = 1;
    }
}
</script>
<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; display:table-cell;}
    .cell {border: none}
</style>

<?php
/*
* Base de données utilisée
-- phpMyAdmin SQL Dump
-- version 2.9.2
-- http://www.phpmyadmin.net
-- 
-- Serveur: localhost
-- Généré le : Jeudi 30 Août 2007 à 02:10
-- Version du serveur: 5.0.27
-- Version de PHP: 5.2.1
-- 
-- Base de données: `test`
-- 

-- --------------------------------------------------------

-- 
-- Structure de la table `equipe`
-- 

CREATE TABLE `equipe` (
  `id` varchar(20) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

-- 
-- Contenu de la table `equipe`
-- 

INSERT INTO `equipe` (`id`) VALUES 
('e1'),
('e2'),
('e3'),
('e4'),
('e5'),
('e6'),
('e7'),
('e8');

-- --------------------------------------------------------

-- 
-- Structure de la table `membre`
-- 

CREATE TABLE `membre` (
  `login` varchar(20) collate latin1_general_ci NOT NULL,
  `equipe` varchar(20) collate latin1_general_ci default NULL,
  PRIMARY KEY  (`login`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

-- 
-- Contenu de la table `membre`
-- 

INSERT INTO `membre` (`login`, `equipe`) VALUES 
('m1', 'e1'),
('m2', 'e2'),
('m3', 'e3'),
('m4', 'e4'),
('m5', NULL),
('m6', NULL);

*/
?> 

<?php
//reçoit 2 paramètres: equipe et login du membre
//print_r($_GET);
$equipe = trim(html_entity_decode($_GET['equipe']));
$equipe = $equipe!="null"?$equipe:null;
$login = trim(html_entity_decode($_GET['login']));
if ($login && file_exists('../bzw.php')){
    include('../bzw.php');
    //Affecter le membre à l'équipe 
    $connexion = mysql_connect($host,$user,$password) or die("connexion impossible au serveur");
    mysql_select_db($database,$connexion) or die("la base de donnée n'a pas pu être ouverte");
    $requet = "UPDATE membre SET equipe='".mysql_real_escape_string($equipe,$connexion)."' WHERE login='".mysql_real_escape_string($login,$connexion)."'";
    $result = mysql_query($requet,$connexion);
    //Vérifier si la mise à jour est effectuée
    if ($result) {
        echo utf8_encode('Affectation effectuée');
        exit;
    }
}
//Dans tous les cas d'erreur
echo utf8_encode('Affectation non effectuée');

?> 
<?php
/*
* Base de données utilisée
-- phpMyAdmin SQL Dump
-- version 2.9.2
-- http://www.phpmyadmin.net
-- 
-- Serveur: localhost
-- Généré le : Jeudi 30 Août 2007 à 02:10
-- Version du serveur: 5.0.27
-- Version de PHP: 5.2.1
-- 
-- Base de données: `test`
-- 

-- --------------------------------------------------------

-- 
-- Structure de la table `equipe`
-- 

CREATE TABLE `equipe` (
  `id` varchar(20) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

-- 
-- Contenu de la table `equipe`
-- 

INSERT INTO `equipe` (`id`) VALUES 
('e1'),
('e2'),
('e3'),
('e4'),
('e5'),
('e6'),
('e7'),
('e8');

-- --------------------------------------------------------

-- 
-- Structure de la table `membre`
-- 

CREATE TABLE `membre` (
  `login` varchar(20) collate latin1_general_ci NOT NULL,
  `equipe` varchar(20) collate latin1_general_ci default NULL,
  PRIMARY KEY  (`login`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;

-- 
-- Contenu de la table `membre`
-- 

INSERT INTO `membre` (`login`, `equipe`) VALUES 
('m1', 'e1'),
('m2', 'e2'),
('m3', 'e3'),
('m4', 'e4'),
('m5', NULL),
('m6', NULL);

*/
?>

<script>
          /**
         * Moteur Ajax
         */       
         function getXhr(){
            var xhr = null;
            if(window.XMLHttpRequest) // Firefox et autres
               xhr = new XMLHttpRequest();
            else if(window.ActiveXObject){ // Internet Explorer
               try {
                         xhr = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                         xhr = new ActiveXObject("Microsoft.XMLHTTP");
                     }
            }
            else { // XMLHttpRequest non supporté par le navigateur
               alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
               xhr = false;
            }
          return xhr;
         }
         
          /**
         * Méthode qui appelle un script serveur et renvoit sa réponse
         *
         * serveur: l'url du script serveur appelé
         * reponse: objet HTML donné par référence à un conteneur HTML de la page chargée
         * paramètres: liste des paramètres éventuellement passés au script serveur (param1=valeur1&param2=valeur2...)
         **/
         function getByAjax(serveur, reponse, methode, parametres){
           var xhr = getXhr(); //Nouvelle instance Ajax
           if (xhr && serveur){
            // On défini la fonction observant la communication Ajax/serveur
            xhr.onreadystatechange = function(){
               // le code 4/200: détermine que Ajax a reçu une réponse du serveur
               if(xhr.readyState == 4 && xhr.status == 200){
                  reponse.innerHTML = xhr.responseText;  //renvoit la réponse du serveur dans le conteneur reponse
               }
             }

             // Déclenchement de l'appel Ajax/serveur + envoi paramètres POST ou GET
             if (methode == "POST"){
            xhr.open("POST", serveur, true);
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
               xhr.send(parametres);
          }
          else {
            xhr.open("GET", serveur+"?"+parametres, true);
               xhr.send(null);             
          }
           }
        }
</script>
<!-- Div de réponse Ajax -->
<div id="div_reponse"></div> 

<!-- Une équipe -->
<div id='e1' onMouseUp="placeMembre(this);" class="equipe"><b>e1</b><hr>
	<!-- Un membre -->
	<div id='m1' onMouseDown="selectMembre(this);" class="membre">m1</div>
</div>

<!-- Une équipe -->
<div id='e2' onMouseUp="placeMembre(this);" class="equipe"><b>e2</b><hr>
	<!-- Un membre -->
	<div id='m2' onMouseDown="selectMembre(this);" class="membre">m2</div>
</div>

<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;
}

//fonction pour placer le membre dans une équipe = fin du drag&drop
function placeMembre(equipe){
	if (equipe && membre_select) {
	
		//Déplacement DomHTML de l'objet membre dans l'objet équipe
		equipe.appendChild(membre_select);
		
		//Effacer la sélection en cours = terminé
		membre_select = null;
	}
}
</script>
<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>