Tri Drag and Drop dans une liste dynamique

Plateforme : PHP / Ajax / JVS / MySQL
Date : 2009
Détails : Permet le tri d'une liste dynamique par Drag and Drop sans rechargement

Pré requis ?

Il existe plusieurs script sur le web qui propose du drag and drop, j'ai fait le tour de tout ces scripts, et il y en a un qui sort du lot qui est très puissant, et en plus de cela très simple à utiliser.
Pour réaliser ce script vous aurez besoin de Jquery, c'est un framework Javascript qui permet de simplifier l'utilisation de javascript. Pour le télécharger rendez vous sur : http://www.jquery.com/
On utilisera aussi un plugin Jquery nommé interface que vous trouverez ici : http://interface.eyecon.ro/download

Comment utiliser JQuery et Interface pour une liste ?

Après avoir téléchargé les 2 fichiers JS, vous devez les intégrer dans votre projet.
Pour cela rien de plus simple, dans votre header de votre page tapez ceci :

<head>

<!-- Importation JQuery et Interface.js -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/interface.js"></script>

<!-- Styles de votre liste -->        
<style type="text/css" media="all">

    .sortable_item {
        cursor : move;
        width : 100%;
        list-style : none;
    }
    
    .ul_style {
        
          list-style-type : none;
          margin : 0;
          padding : 0;
    }
    
</style>

</head>

Comment utiliser le drag & drop pour trier une liste ?

Après avoir importé Jquery et Interface dans votre entête HTML vous pouvez commencer à créer votre liste de tri.
Voici comment procéder :

<body>

<!-- ici ce trouve votre liste -->

<ul id="sortlist" class="ul_style"> 
 
    <li id="votre_id_1" class="sortable_item">item 1</li>
    <li id="votre_id_2" class="sortable_item">item 2</li>
    <li id="votre_id_3" class="sortable_item">item 3</li>
    <li id="votre_id_4" class="sortable_item">item 4</li>
    
</ul>


<!-- ce script java est à intégrer juste avant votre balise </body> -->

<script type="text/javascript">

    $(document).ready (
        function() {
            $( "#sortlist" ).Sortable( {
            accept : 'sortable_item',
            axis : 'vertically',
            opacity : 0.6,
            onchange : function ( sorted ) {
            serial = $.SortSerialize( 'sortlist' ); 
            }
        });
    });

</script>

</body>

Remarque :
Ici les listes ne contiennent que du texte.
On peut bien sur intégrer des images et autres comme élément de liste.

Voici ci dessous le résultat obtenu :

Quel sont les options disponibles pour ma liste ?

Voici quelques options permettant de personnaliser le drag & drop,
Vous trouverez la liste de ces paramètres et méthodes sur : http://interface.eyecon.ro/docs/sort

axis : Bloque le drag & drop sur un axe (vertically ou horizontally)
opacity : Permet de régler l'opacité (de 0 à 1)
fx : Durée de l'effet d'apparition lors du drop (nombre en ms)
ghosting : crée un copie de l'élément déplacé

Comment sauvegarder la position de la liste avec PHP et MySql ?

Pour allez encore plus loin on peut utiliser les méthodes Jquery pour envoyer une requête Ajax.
Avec Ajax vous pouvez appeler une page PHP qui vous permettra de sauvegarder les positions
des éléments et cela sans recharger la page.

<script type="text/javascript">

    $(document).ready (
        function () {
            $( "#sortlist" ).Sortable ( {
            accept : 'sortable_item',
            axis : 'vertically',
            opacity : 0.6,
            onchange : function ( sorted ) {
            serial = $.SortSerialize ( 'sortlist' ); 
            // requète Ajax pour l'enregistrement des positions
            $.ajax ( {
                url : "set_position.php",
                type : "post",
                data : serial.hash,

                // Si vous avez besoin d'un feedback de la requête vous
                // pouvez utiliser ces fonctions ci dessous.

                //complete: function(data){alert(data);},
                //success: function(feedback){ $('#data').html(feedback); }
                //error: function(){alert('Erreur lors du déplacement ');}

                });
            }

        });
    });

</script>

Remarque :
Attention les id des éléments de la liste ( balise <li id='votre id'> )
doit être cohérent avec les id contenu dans la base MySql.

Voici maintenant le script php "set_position.php" :

<?

    /*  
    Mettez ici votre script de connexion à votre base de données 
    */

    // Récupération des valeurs post envoyé par la requête Ajax
    $sortlist = $_POST [ 'sortlist' ];
        
    // On update la table avec les nouvelles positions
    
    for ($i = 0 ; $i < count ( $sortlist ) ; $i++) {
        
            // SQL Query :
            $query = ( "update matable set position='".($i + 1)."' where id = $sortlist [ $i ] " );
            $ajout = mysql_query ($query) or die ( mysql_error() );
        
    }


?>

JQuery et les plugins ?

Voici les différents plugin JQuery si vous voulez approfondir l'utilisation de ce framework javascript :
http://docs.jquery.com/Plugins

Fichiers joints :

Télécharger les sources des exemples

Wiki