Drag & Drop pour les menus de CMS

Je profite de cette période de vacance pour expérimenter les nouvelle technologies disponiblent pour la réalisation de sites internet et améliorer encore et toujours mon mini CMS.

Je me suis lancé à la recherche d'une interface agréable pour la réalisation de menus dans le Backoffice de mon CMS.

Après avoir terminé mon interface, je voulais améliorer la possibilité de classement des menus par un système de type Drag & Drop permettant de déplacer les menus et leur affecter leur nouvelle position.

Suite à mes recherches, je suis tombé sur JQuery, une classe Javascript qui est simplement une merveille. La communauté des dévellopeurs travaillent sur ce script et il existe de nombreux plugins permettant d'ajouter des fonctions à celle-ci.

J'ai donc retenu JQuery et le plugin Interface pour le Drag & Drop et je vous propose donc un petit tutorial pour réaliser ce projet :

Dans un premier temps nous allons télécharger les deux fichiers nécessaires à notre projet  soit :

JQuery
Interface

Il suffit maintenant de créer un nouveau fichier HTML dans votre logiciel favoris et de commencer par incorporer l'appel aux deux scripts dans les balises Head ( vous remarquerez au passage que j'ai mis les scripts dans un sous-repertoire appélé : js )

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

Dans principe maintenant, nous devons créer une strcture ou la partie qui sera déplacable par le drag & drop est située dans un conteneur définit par un id appelé "sortlist" et les lignes déplacable par la class "sortable_item". Par ce principe vous pouvez parfaitement rentre n'importe quoi déplacable. Un tableau, des divs, des images, etc...
Dans notre exemples nous allons utiliser des divs pour réaliser l'opération. Pour cela nous allons définir notre feuille de style comme ceci :

<style type="text/css" media="all">

    .sortable_item {
        cursor : move;
        width : 400px;
        height: 52px;
    }
  
.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
  
</style>

3 blocs avec un conteneur "sortlist" pour définir la zone de déplacement.

Puis dans notre zone html, nous agençons nos éléments :

<div id="sortlist">

<div id="1" class="sortable_item"> <div class="bloc1">1.1</div><div class="bloc2">1.2</div><div class="bloc3">1.3</div> </div>
<div id="2" class="sortable_item"> <div class="bloc1">2.1</div><div class="bloc2">2.2</div><div class="bloc3">2.3</div> </div>
<div id="3" class="sortable_item"> <div class="bloc1">3.1</div><div class="bloc2">3.2</div><div class="bloc3">3.3</div> </div>
<div id="4" class="sortable_item"> <div class="bloc1">4.1</div><div class="bloc2">4.2</div><div class="bloc3">4.3</div> </div>

</div>

Vous remarquez le conteneur "sortlist" et les lignes "sortable_item" qui indiques celle qui sont déplaçable par notre système Drag & Drop. Les id de chaques lignes vont nous servir dans un article suivant sur l'enregistrement des positions en Ajax dans un fichier PHP.

Il ne reste plus qu'a appeler notre script java avec les lignes suivantes à placer avant la balise de fermture </form>

<script type="text/javascript">
    
    $(document).ready (
        function () {
            $( "#sortlist" ).Sortable ( {
            accept : 'sortable_item',
            axis : 'vertically',
            opacity : 0.6,
         

        });
    });   
  
</script>