Skip to main content

External Dnd Events

External Dnd events can be intercepted through a number of utilities.

onDidDrop
Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
onDidDrop: Event<DockviewDidDropEvent>
onUnhandledDragOverEvent
onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>

Intercepting Drag Events​

You can intercept drag events to attach your own metadata using the onWillDragPanel and onWillDragGroup api methods.

nativeEvent narrowing​

event.nativeEvent on drag-related events (onWillDragPanel, onWillDragGroup, onWillDrop, onWillShowOverlay, onUnhandledDragOverEvent) is typed as DragEvent | PointerEvent to cover both the HTML5 and pointer-event (touch / pen) backends.

Narrow before reading DragEvent-only fields like dataTransfer:

api.onWillDragPanel((event) => {
    if (!(event.nativeEvent instanceof DragEvent)) {
        return; // touch / pen drag — no DataTransfer
    }
    event.nativeEvent.dataTransfer?.setData('text/plain', '...');
});

Touch and pen drags cannot bridge to external HTML5 drop zones, so skipping them here is the intended behaviour — the drag still works inside dockview.

Newsletter