Bonjour,

Je suis en train de développer une petite appli web.

En gros j'ai une page index.html qui contient 2 parties :
- Une partie sur la gauche qui affiche des cases avec les champs de ma base de données (ex : une case nom, une autre prénom...)
- Une autre partie sur la droite avec un espace ou les champs peuvent être glisser/déposés pour faire afficher les colonnes correspondantes aux champs glisser.

J'ai un script dragndrop.js qui gere le glisser déposé.

Un script tab.php qui charge la colonne dynamiquement dans index.php lorsque je glisse un champs.

Tout ça marche, c'est à dire que j'arrive bien à glisser déposer mes champs dans l'espace prévu pour. Et je fait afficher mes colonnes dans un DIV différent à chaque fois.
Le problème c'est que du coup je me retrouve avec autant de tableau que de DIV... Donc si je veux faire des tris sur le tableau il n'y a qu'une colonne qui se met à jour....

Comme faire pour n'avoir qu'un seul tableau ?

J'avais penser à afficher tout le tableau en "display: none" et ensuite afficher les colonne voulues à chaque drag and drop mais à chaque fois je me retrouve avec le titre de ma colonne et juste une seule donnée dans mon tableau. Alors que si je charge tout le tableau en "display: bloc" il s'affiche au complet !!

Je vous met des petits bout de code :

Extrait de la page index.html :

<div id="leftColumn">
                    <div class="dragableBox" id="box1">Nom</div>
                    <div class="dragableBox" id="box2">Prenom</div>
            </div>
            <div id="rightColumn">
                <div id="dropBox" class="dropBox">
                    <p><b>Glisser les champs pour les afficher</b></p>
                    <div id="dropContent">
                        <div id="dropContentBox1"></div>
                        <div id="dropContentBox2"></div>
                    </div>		
                </div>
            </div>

<script type="text/javascript">
        var boxID = null;
        function handleHttpResponse() 
        {   
            if(boxID=='box1')
            {
                if (http.readyState == 4) 
                {
                    if(http.status==200) 
                    {
                        var results=http.responseText;
                        document.getElementById('dropContentBox1').innerHTML = results;
                    }
                }
            }
            if(boxID=='box2')
            {
                if (http.readyState == 4) 
                {
                    if(http.status==200) 
                    {
                        var results=http.responseText;
                        document.getElementById('dropContentBox2').innerHTML = results;
                    }
                }
            }
        }

        function requestCustomerInfo(idOfDraggedItem) 
        {      
                http.open("GET", "tab.php?box=" + idOfDraggedItem, true);
                http.onreadystatechange = handleHttpResponse;
                boxID = idOfDraggedItem;
                http.send(null);
        }

        function getHTTPObject() 
        {
            var xmlhttp;

            if(window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
            else if (window.ActiveXObject)
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                if (!xmlhttp)
                {
                    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
            }
            return xmlhttp;
        }
        var http = getHTTPObject();

        var dragDropObj = new DHTMLgoodies_dragDrop();
        dragDropObj.addSource('box1',true);
        dragDropObj.addSource('box2',true);
        dragDropObj.addTarget('dropBox','requestCustomerInfo');
        dragDropObj.init();
    </script>

if($box)
{
    echo "<table class=\"sortable\" border=1>";
        echo "<thead>";
            echo "<tr>";
                if($box == 'box1'){echo "<td height=\"20\">Nom</td>";}
                if($box == 'box2'){echo "<td height=\"20\">Prenom</td>"; }
            echo "</tr>";
        echo "</thead>";
        echo "<tbody>";
            while ($line = pg_fetch_assoc($result)){
                echo "<tr>";
                    if($box == 'box1'){echo "<td height=\"20\">".$line['Lname']."</td>"; }
                    if($box == 'box2'){echo "<td height=\"20\">".$line[Fname']."</td>";}
                echo "</tr>";
            }
        echo "</tbody>";
    echo "</table>";
}