Vous en avez marre de vous arracher les cheveux à chaque fois que vous essayez de réorganiser des éléments sur une page web ? Alors voici un outil qui va vous faire gagner un temps fou : Swapy. Ce petit projet transforme n’importe quel layout css en un terrain de jeu interactif où tout se déplace aussi facilement qu’un Tetris bien huilé.

Ça va vous permettre de rendre les composants d’une page web aussi malléables que de la pâte à modeler, sans avoir à vous plonger dans des scripts alambiqués ou des librairies plus lourdes que moi. Les utilisateurs pourront alors réarranger les éléments de la page comme bon leur semble. C’est top par exemple si vous développez des tableaux de bord, des kanban ou ce genre de trucs.

Maintenant pour intégrer Swapy dans votre projet, c’est ultra simple. Il suffit de l’installer comme ceci :

pnpm install swapy

Ou d’importer le JS comme cela :

<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>

Et mettre ces quelques lignes de code dans votre projet :

<script>
import { createSwapy } from 'swapy'

const container = document.querySelector('.container')

const swapy = createSwapy(container, {
  animation: 'dynamic' // ou 'spring' ou 'none'
})

swapy.enable(true)
</script>

Et voilà, Swapy est prêt à faire son show !

Ensuite, en attribuant les propriétés data-swapy-slot et data-swapy-item, vous indiquez à Swapy quels éléments peuvent être déplacés et où ils peuvent atterrir.

<div class="container">
  <div class="section-1" data-swapy-slot="foo">
    <div class="content-a" data-swapy-item="a">
      <!-- Your content for content-a goes here -->
    </div>
  </div>

  <div class="section-2" data-swapy-slot="bar">
    <div class="content-b" data-swapy-item="b">
      <!-- Your content for content-b goes here -->
      <div class="handle" <strong>data-swapy-handle</strong>></div>
    </div>
  </div>

  <div class="section-3" data-swapy-slot="baz">
    <div class="content-c" data-swapy-item="c">
      <!-- Your content for content-c goes here -->
    </div>
  </div>
</div>

Et si vous préférez avoir une poignée pour déplacer vos éléments plutôt que de les rendre entièrement cliquables ? Pas de souci, ajoutez simplement un élément avec l’attribut data-swapy-handle à l’intérieur de votre item.

Ainsi, seul l’élément avec la classe handle permettra de déplacer votre item.

Swapy propose aussi plusieurs options d’animation pour rendre vos échanges d’éléments plus fluides qu’un moonwalk de Michael Jackson. Choisissez entre dynamic, spring ou none selon votre humeur du jour.

Et sous le capot, Swapy utilise les fonctionnalités natives de JavaScript pour la manipulation du DOM et les événements de glisser-déposer.

Maintenant, pour passer aux choses sérieuses, je vous invite surtout à vous rendre sur la doc du projet où tout est bien expliqué !