Glisser-déposer (Draggable)

Liste réordonnables par glisser-déposer. Permet aux utilisateurs de réorganiser des éléments de manière intuitive.

Avec poignée

Élément 1

Élément 2

Élément 3

Élément 4

<div class="bj-draggable" data-bj-draggable>
  <div class="bj-draggable__item" data-bj-draggable-item tabindex="0" role="listitem">
    <span class="bj-draggable__handle" aria-hidden="true"></span>
    <span class="bj-draggable__content">Élément 1</span>
  </div>
  <div class="bj-draggable__item" data-bj-draggable-item tabindex="0" role="listitem">
    <span class="bj-draggable__handle" aria-hidden="true"></span>
    <span class="bj-draggable__content">Élément 2</span>
  </div>
  <div class="bj-draggable__item" data-bj-draggable-item tabindex="0" role="listitem">
    <span class="bj-draggable__handle" aria-hidden="true"></span>
    <span class="bj-draggable__content">Élément 3</span>
  </div>
</div>

Liste simple

Sans poignée 1

Sans poignée 2

Sans poignée 3

<div class="bj-draggable" data-bj-draggable>
  <div class="bj-draggable__item" data-bj-draggable-item tabindex="0" role="listitem">
    <span class="bj-draggable__content">Sans poignée 1</span>
  </div>
  <div class="bj-draggable__item" data-bj-draggable-item tabindex="0" role="listitem">
    <span class="bj-draggable__content">Sans poignée 2</span>
  </div>
</div>

État désactivé

Élément non déplaçable 1

Élément non déplaçable 2

<div class="bj-draggable bj-draggable--disabled" data-bj-draggable data-bj-draggable-disabled>
  <div class="bj-draggable__item" data-bj-draggable-item>
    <span class="bj-draggable__handle" aria-hidden="true"></span>
    <span class="bj-draggable__content">Élément non déplaçable</span>
  </div>
</div>

Classes CSS

Classe	Description
`.bj-draggable`	Conteneur principal de la liste réordonnable
`.bj-draggable__item`	Élément individuel déplaçable
`.bj-draggable__handle`	Poignée de glissement
`.bj-draggable__content`	Zone de contenu de l'élément
`.bj-draggable__item--dragging`	Élément en cours de déplacement
`.bj-draggable__item--over`	Élément survolé lors du glissement
`.bj-draggable--disabled`	Modificateur : liste désactivée

Attributs data

Classe	Description
`data-bj-draggable`	Active le comportement draggable sur le conteneur
`data-bj-draggable-item`	Marque un enfant comme élément déplaçable
`data-bj-draggable-handle`	Sélecteur CSS de la poignée (optionnel)
`data-bj-draggable-disabled`	Désactive le glisser-déposer