Tutoriel JavaScript : Redimensionnement en drag'n drop

Dans ce tutoriel je vous propose de découvrir comment créer un système de redimensionnement en JavaScript. L'objectif est de permettre à l'utilisateur de redimensionner la sidebar.

Le style

Pour notre structure nous allons utiliser une grille avec une variable CSS pour piloter la largeur de la sidebar.

<style>
  body,
  html {
    --sidebar: 300px;
  }
  .layout {
    display: grid;
    grid-template-columns: var(--sidebar) 1fr;
  }
</style>
<div class="layout">
  <aside class="sidebar">
    <!-- Cet élément servira -->
    <div class="resizer"></div>
  </aside>
  <main class="main">
    <!-- Le contenu ici -->
  </main>
</div>

Pour contrôler la sidebar, on va créer un élément qui servira de zone sélectionnable (on rendra cette zone volontairement plus large afin de faciliter la sélection)

.resizer {
  position: absolute;
  top: 0;
  right: -10px;
  height: 100%;
  width: 20px;
  cursor: ew-resize;
  touch-action: none;
}

On utilisera ensuite les pseudos élément pour définir l'aspect visuel de notre curseur de redimensionnement.

.resizer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: coral;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
}

.resizer:hover::after {
  opacity: 1;
  transform: scaleX(0.2);
}

Souris & Doigts

Afin de gérer, les différents périphériques nous allons utiliser les évènements de type PointerEvent qui offre une API commune à tous les dispositifs de pointage.

// Lorsque l'on clique sur l'élément
element.addEventListener("pointerdown", onPointerDown);

/**
 * On commence à écouter le déplacement du curseur
 *
 * @param {PointerEvent} e
 **/
function onPointerDown(e) {
  e.preventDefault();
  document.addEventListener("pointermove", onPointerMove);
  document.addEventListener("pointerup", onPointerUp, { once: true });
}

/**
 * Au déplacement du curseur, on met à jour la largeur de la sidebar
 *
 * @param {PointerEvent} e
 **/
function onPointerMove(e) {
  e.preventDefault();
  const sidebarWidth = e.pageX + "px";
  document.body.style.setProperty("--sidebar", sidebarWidth);
}

/**
 * Lorsque le curseur est relaché, on arrête de suivre le déplacement du curseur
 *
 * @param {PointerEvent} e
 **/
function onPointerUp(e) {
  document.removeEventListener("pointermove", onPointerMove);
}

Limiter la largeur

Pour limiter la largeur de la sidebar on va se reposer sur le CSS et la fonction CSS [clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()) qui permettra en prime de prendre en compte la taille de l'écran.

.layout {
  --sidebarClamped: clamp(300px, var(--sidebar), 50vw);
  grid-template-columns: var(--sidebarClamped) 1fr;
}