dnd-kit
dnd-kit copied to clipboard
[experimental]: Expose imperative start/cancel methods on Sensor
I have a use case in which I use the keyboard to drag sortables. When the user click a sortable I want to cancel the keyboard sensor and start a new one. This doesn't seem to be supported AFAICT.
Workaround
// stop keyboard sensor
const sensor = dragDropManager.sensors.find(
(sensor) => sensor instanceof KeyboardSensor
);
if (sensor) {
sensor["handleEnd"]((e as React.SyntheticEvent).nativeEvent, true);
}
dragDropManager.actions.stop({ canceled: true });
// focus sortable ref to activate keyboard sensor
const target = e.currentTarget;
target?.focus();
dragDropManager.actions.setDragSource(`cube/${id}`);
I am also trying to achieve cancelling a keyboard sensor and activating a pointer sensor but getting an error:
Uncaught Error: Cannot start a drag operation while another is active
at DragActions.start
at onPointerDown
onPointerDown={(e) => {
if (
!dragDropManager ||
!(
dragDropManager.dragOperation.activatorEvent instanceof
KeyboardEvent
)
) {
return;
}
// stop keyboard sensor
const sensor = dragDropManager.sensors.find(
(sensor) => sensor instanceof KeyboardSensor
);
if (sensor) {
sensor["handleEnd"](e.nativeEvent, true);
}
dragDropManager.actions.stop({
event: e.nativeEvent,
canceled: true,
});
// focus sortable ref to activate keyboard sensor on first keydown
const target = e.currentTarget;
target?.focus();
dragDropManager.actions.setDragSource(`cube/${id}`);
dragDropManager.actions.start({
event: e.nativeEvent,
source: `cube/${id}`,
coordinates: {
x: e.clientX,
y: e.clientY,
},
});
}}