Drag & Drop pour les menus de CMS

posté le 29 December 2008 à 11:05

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>


Commentaires

gwendal a dit :
posté le 29 December 2008 à 12:03
groove_salad a dit :
posté le 29 December 2008 à 12:15
Le DHTML est pas mal aussi pour ce type d'effets.

gwendal a dit :
posté le 29 December 2008 à 12:20
Le mélange de javascript et de HTML c'est du DHTML, donc exactement ce que j'ai utilisé pour le tuto ci-dessus ;-).

Ellendhel a dit :
posté le 29 December 2008 à 13:29
Roh mais quelle honte de mettre un logo de produit d'entretien pour ce genre de chose.

Merci pour les explications et les liens cependant.

Akshell a dit :
posté le 29 December 2008 à 14:54
moi je me suis même fait chier à faire tourner l'image pour faire le logo qui tourne

gwendal a dit :
posté le 29 December 2008 à 15:07
Akshell : ?

Akshell a dit :
posté le 29 December 2008 à 15:11
le logo ajax, pour en faire une animation de chargement.

gwendal a dit :
posté le 29 December 2008 à 15:13
haa ok en effet :)

J'aime bien le classique


PanPan a dit :
posté le 29 December 2008 à 18:40
J'avais déjà fais un truc du genre, je me suis juste emmerdé à sauvegarder la position pour une éventuelle revisite du site. Je crois que j'ai abandonné... l'ajax c'est imbuvable !

Akshell a dit :
posté le 29 December 2008 à 22:55
Quand tu reprends les exemples un par un c'est simple quand tu cherches à généraliser sur une page entière... j'avais fait ça pour un tableau, chargement, filtre, changement de page, édition des cellules individuellement, ajout d'enregistrement... tu y passes 10 fois plus de temps pour un gain d'ergonomie quasi nul. ça motive pas.

gwendal a dit :
posté le 30 December 2008 à 09:42
Gain d'ergonomie quasi nul ? Je suis pas d'accord avec toi à ce niveau. Plus tu te rapproche d'une interface windows et plus tu te rapproche de l'utilisateur et de ses habitudes.
Un Backoffice qui rame et qui recharge les pages à chaque modifications c'est un horreur du point de vue de l'ergonomie.
Le gain de temps il doit être au niveau de l'utilisateur et non pas au niveau du dev qui lui est la pour offrir le meilleur programmes aux utilisateurs en ce rapprochant de leurs habitudes et leurs besoins.
De plus on ce rapproche rapidement des applications en ligne qui est incontestablement l'avenir de l'informatique, et sans l'ajax ou de nouvelles technologies, je ne vois pas comment tu peux offrir une interface convenable aux utilisateurs.


Kefass a dit :
posté le 04 January 2009 à 13:06
Ajax imbuvable ?

C'est juste une habitude à prendre. Couplé à php5 et/ou un systéme de template, il est bien plus simple de bien structurer son site et d'avoir un code propre et fonctionnel.

Aprés c'est comme tout, faut pas en abuser.

CaptNCook a dit :
posté le 05 January 2009 à 10:19
Il reste le problème de l'url qui ne change pas quand par exemple on change de page. Deezer utilise les ancres mais c'est pas complètement idéal.

Cyp a dit :
posté le 05 January 2009 à 11:05
Jquery est très puissant mais quand tu dois reprendre le code de quelqu'un d'autre, c'est vraiment affreux ces lignes condensées.
Y'en a quand même marre de se trainer les résidus de javascript en 2009, y'aurait pas une nouvelle techno standard qui se profilerait par hasard ?

gwendal a dit :
posté le 05 January 2009 à 11:38
C'est vrai que jquery il faut bien le commenter sinon tu comprend plus rien à ton code une semaine après.


Poster un commentaire

Invité

Vous souhaitez commenter immédiatement ce billet. Vous ne pourrez pas l'éditer une fois envoyé.

Membre

Vous êtes membre ou souhaitez vous créer un compte sur l'asile.fr