Skip to main content

External drag and drop events

External drag and drop 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>
onUnhandledDragOver
onUnhandledDragOver: Event<DockviewDndOverlayEvent>

Intercepting drag events​

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

Where the drop landed​

onDidDrop reports the group under the drop and the position within it, and for a drop on a group's tab bar, index: the tab index the drop landed at, which is where a panel added in response belongs (addPanel's index, or addGroupFromJSON with direction: 'within'). index is undefined for a drop on a group's content or on a layout edge, where group is also undefined.

nativeEvent narrowing​

event.nativeEvent on drag-related events (onWillDragPanel, onWillDragGroup, onWillDrop, onWillShowOverlay, onUnhandledDragOver) 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.

See also​