Drag & Drop List

Virtualized, multi-select drag-and-drop list. Try clicking, shift-clicking, dragging, and using keyboard shortcuts. See spec.

Interactions

Action	macOS	Windows / Linux
Select item	Click
Extend selection	Shift + Click
Toggle item	Cmd + Click	Ctrl + Click
Navigate	Arrow Up / Down
Extend with keyboard	Shift + Arrow
Move selection	Cmd + Arrow	Ctrl + Arrow
Select first / last	Option + Arrow	Alt + Arrow
Drag	Click & hold, then drag
Clear selection	Escape

Usage

import { register, DndSource } from "@primavera-ui/components/dnd";
register();

const items = [
  { key: "1", label: "Item 1" },
  { key: "2", label: "Item 2" },
  { key: "3", label: "Item 3" },
];

const keyIndex = new Map(items.map((i) => [i.key, i]));

const source = new DndSource({
  getKey: (item) => item.key,
  getOrder: () => items.map((i) => i.key),
  getItem: (key) => keyIndex.get(key),
});

const renderer = {
  mount(key, item, container) {
    container.textContent = item.label;
    return () => {};
  },
};

const el = document.querySelector("primavera-dnd");
el.setSource(source);
el.setRenderer(renderer);