Sortable est une étonnante librairie JavaScript, qui n'utilise pas jQuery, pour les navigateurs modernes et les 'touch devices' (mobiles & tablettes).
Elle permet entre autres chose de trier des listes de façon visuelle par le biais du drag-and-drop.
jQuery permet de faire la même chose mais pas, et de loin, aussi bien.

Démo de SortableJS, réordonner une liste de menus par drag-and-drop

A titre d'exemple nous allons utiliser SortableJS pour réordonner une liste de menus.
Empruntons à w3schools une page HTML pourvue d'un menu.

HTML + Javascript
<!DOCTYPE html>
<html>
    <head>
        <script src="Sortable.js"></script>
            <style>
                #menu {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                    background-color: #333;
                }
                #menu li {
                    float: left;
                }
                #menu li a {
                    display: block;
                    color: white;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                }
                #menu li a:hover:not(.active) {
                    background-color: #111;
                }
                #menu .active {
                    background-color: #4CAF50;
                }
            </style>
    </head>
    <body>
        <ul id="menu">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
        <script>
            var menulist = document.getElementById("menu");
            var sortableMenulist = Sortable.create(menulist,{});
        </script>
    </body>
</html>

Voilà le résultat.
Faites un click gauche sur 'Home' par exemple, gardez le bouton appuyé et déplacez l'item ou bon vous semble, tout en restant dans le menu, et vous verrez que ça fonctionne très bien.
Vous pouvez aussi le tester en direct et de la même manière avec l'exemple ci-dessous.


download Le source complet est téléchargeable ici.


Ecrire un commentaire