Draggable

Layout

Drag-and-drop sortable list (vertical or horizontal) with optional handle.

Instalação via CLI

$ npx kikitocn add draggable

Interno:

@/lib/utils

Exemplo de uso

DraggableExample.tsx

import { Draggable } from "@/components/ui/cn/draggable/Draggable";

export function DraggableExample() {
  return (
    <Draggable direction="vertical" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`items*`	`DraggableItem[]`	—	Lista de itens: { id, content: ReactNode }
`onChange`	`(items: DraggableItem[]) => void`	`undefined`	Callback com nova ordem após drag
`direction`	`'vertical' \| 'horizontal'`	`'vertical'`	Direção do drag
`handle`	`boolean`	`false`	Exibe alça de arraste em vez de arrastar pelo item inteiro
`className`	`string`	—	Classes extras pro wrapper
`style`	`CSSProperties`	—	Estilos inline pro wrapper

Voltar para Layout

Carregando…