BjDraggable — Vue

Composant Vue 3 pour créer des listes réordonnables par glisser-déposer.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjDraggable } from '@flrxnt/dsbj/vue'

const items = ref(['Élément A', 'Élément B', 'Élément C'])

function onReorder({ from, to }) {
  const arr = [...items.value]
  const [moved] = arr.splice(from, 1)
  arr.splice(to, 0, moved)
  items.value = arr
}
</script>

<template>
  <BjDraggable :items="items" @reorder="onReorder" />
</template>

Aperçu interactif

Élément A
Élément B
Élément C
Élément D

Slots

1. Élément A
2. Élément B
3. Élément C
4. Élément D
<BjDraggable :items="items" @reorder="onReorder">
  <template #default="{ item, index }">
    <strong>{{ index + 1 }}.</strong> {{ item }}
  </template>
</BjDraggable>

Props

ClasseDescription
itemsTableau de chaînes représentant les éléments à afficher.
handleAffiche la poignée de glissement (défaut : true).
disabledDésactive le glisser-déposer.
tagBalise HTML du conteneur (défaut : "div").

Événements

ClasseDescription
reorderÉmis lors du réordonnancement. Payload : { from: number, to: number }.

Accessibilité

Les éléments sont navigables au clavier avec les touches Flèche haut et Flèche bas. Chaque élément possède un role="listitem" et un aria-label.