useDraggable
listeners must be able to receive focus. To learn more, read the in-depth Accessibility guide.onKeyDown
event handler. The Keyboard sensor is initialized if the event.code
property matches one of the start
keys passed to keyboardCodes
option of the Keyboard sensor.
By default, the keys that activate the Keyboard sensor are Space
and Enter
.
start
, cancel
and end
events. The keyboardCodes
options adheres to the following interface:
enter
(on Windows) or return
(on macOS) and the space
key. To learn more, read the in-depth accessibility guide.
Keep in mind that you should also customize the screen reader instructions using the screenReaderInstructions
prop of <DndContext>
if you update these values, as the screen reader instructions assume that the Keyboard sensor is initialized with the default keyboard shortcuts.
The move
keyboard codes are not a customizable option, because those are handled by the coordinate getter function. To customize them, write a custom coordinate getter function.
25
pixels when any of the arrow keys are pressed while dragging.
This is an arbitrary sensible default that may or may not be suited to the use case you are building.
The getNextCoordinates
option can be used to define a custom coordinate getter function that is passed the latest keyboard event
along with the current coordinates:
getNextCoordinates
option to build on top of the Keyboard sensor and move the active sortable item to its new index depending on the arrow key that is pressed.
smooth
, which results in the scroll container being scrolled smoothly to the new coordinates.
The other possible value is auto
, which results in the scroll container being scrolled directly to the new coordinates without any animation.