Swapy : Réorganisez vos éléments web facilement avec JavaScript

Découvrez Swapy : L’outil JavaScript pour une réorganisation dynamique de vos éléments web

Vous en avez assez de vous battre avec la mise en page de votre site web ? Ne cherchez plus, Swapy est l’outil qu’il vous faut ! Ce projet innovant transforme n’importe quel layout CSS en un véritable terrain de jeu interactif, où tous les éléments se déplacent avec la fluidité d’un jeu de Tetris. Grâce à Swapy, la réorganisation de vos composants devient un jeu d’enfant.

Facilité d’intégration de Swapy dans vos projets

Intégrer Swapy à votre projet nécessite peu d’efforts. Il vous suffit d’ajouter le code suivant pour installer l’outil :

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

Ensuite, insérez ces quelques lignes dans votre script :

<script>
import { createSwapy } from 'swapy'

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

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

swapy.enable(true)
</script>

Votre outil est alors prêt à fonctionner !

Comment définir les éléments déplaçables avec Swapy

Pour spécifier quels éléments peuvent être déplacés, utilisez les attributs data-swapy-slot et data-swapy-item. Voici un exemple de structure HTML :

<div class="container">
  <div class="section-1" data-swapy-slot="foo">
    <div class="content-a" data-swapy-item="a">
      <!-- Votre contenu ici -->
    </div>
  </div>

  <div class="section-2" data-swapy-slot="bar">
    <div class="content-b" data-swapy-item="b">
      <!-- Votre contenu ici -->
      <div class="handle" data-swapy-handle></div>
    </div>
  </div>

  <div class="section-3" data-swapy-slot="baz">
    <div class="content-c" data-swapy-item="c">
      <!-- Votre contenu ici -->
    </div>
  </div>
</div>

Options d’animation et manipulation intuitive

Swapy offre aussi la possibilité d’ajouter une poignée pour déplacer les éléments. En intégrant un élément avec l’attribut data-swapy-handle, seul cet élément sera cliquable pour déplacer son contenu. Cela facilite encore plus la réorganisation des éléments sans risquer de déplacer accidentellement tout le bloc.

Pour les animations, Swapy propose plusieurs options qui rendent les échanges d’éléments fluides. Vous pouvez choisir entre dynamic, spring ou même none, selon l’effet désiré. Cette flexibilité permet d’adapter l’expérience utilisateur à vos préférences.

Quelles technologies sont sous le capot ?

Enfin, sachez que Swapy repose sur des fonctionnalités natives de JavaScript, ce qui garantit une manipulation efficace du DOM ainsi qu’une gestion fluide des événements de glisser-déposer. Cela en fait un outil léger et performant pour tous vos besoins de réorganisation web.

Pour en savoir plus et découvrir toutes les nuances de Swapy, nous vous recommandons de consulter la documentation officielle, où chacune des fonctionnalités est expliquée en détail.