Detect keyboard input to initiate drag and drop operations.
import {DragDropManager} from '@dnd-kit/dom'; import {KeyboardSensor} from '@dnd-kit/dom/sensors'; const manager = new DragDropManager({ sensors: [ KeyboardSensor.configure({ keyboardCodes: { start: ['Space', 'Enter'], cancel: ['Escape'], end: ['Space', 'Enter'], up: ['ArrowUp'], down: ['ArrowDown'], left: ['ArrowLeft'], right: ['ArrowRight'], }, }), ], });
const defaultKeyboardCodes = { start: ['Space', 'Enter'], // Start dragging cancel: ['Escape'], // Cancel drag operation end: ['Space', 'Enter'], // End dragging up: ['ArrowUp'], // Move up down: ['ArrowDown'], // Move down left: ['ArrowLeft'], // Move left right: ['ArrowRight'], // Move right };
KeyboardSensor.configure({ keyboardCodes: { // Use Tab to start/end dragging start: ['Tab'], end: ['Tab'], // Use WASD for movement up: ['KeyW'], down: ['KeyS'], left: ['KeyA'], right: ['KeyD'], // Additional cancel keys cancel: ['Escape', 'KeyQ'], }, });
interface KeyboardCodes { start: KeyCode[]; // Start dragging cancel: KeyCode[]; // Cancel operation end: KeyCode[]; // End dragging up: KeyCode[]; // Move up down: KeyCode[]; // Move down left: KeyCode[]; // Move left right: KeyCode[]; // Move right } type KeyCode = KeyboardEvent['code'];
keydown
keyup