dnd-kit icon indicating copy to clipboard operation
dnd-kit copied to clipboard

[experimental]: Expose imperative start/cancel methods on Sensor

Open ShaMan123 opened this issue 1 month ago • 2 comments

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.

ShaMan123 avatar Nov 23 '25 18:11 ShaMan123

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}`);

ShaMan123 avatar Nov 24 '25 07:11 ShaMan123

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,
            },
          });
        }}

ShaMan123 avatar Nov 24 '25 07:11 ShaMan123