Skip to main content

Drag and drop

Dockview makes heavy use of drag and drop functionality.

onWillDragGroup
Invoked before a group is dragged. Calling event.nativeEvent.preventDefault() will prevent the group drag starting.
onWillDragGroup: Event<GroupDragEvent>
onWillDragPanel
Invoked before a panel is dragged. Calling event.nativeEvent.preventDefault() will prevent the panel drag starting.
onWillDragPanel: Event<TabDragEvent>
onWillDrop
Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and prevent the event from occuring using the standard preventDefault() syntax. Preventing certain events may causes unexpected behaviours, use carefully.
onWillDrop: Event<DockviewWillDropEvent>
onWillShowOverlay
Invoked before an overlay is shown indicating a drop target. Calling event.preventDefault() will prevent the overlay being shown and prevent the any subsequent drop event.
onWillShowOverlay: Event<DockviewWillShowOverlayLocationEvent>

Drag and drop​

You can override the conditions of the far edge overlays through the dndEdges prop.

Extended behaviours​

For interaction with the drag events directly the component exposes some methods to help determine whether external drag events should be interacted with or not.

The onDidDrop handler and onUnhandledDragOver registration use the same API across all frameworks; only the component wiring differs.

/**
 * Called when a drop event does not originate from the dockview library
 * and passes the onUnhandledDragOver condition.
 */
const onDidDrop = (event: DockviewDropEvent) => {
    const { group } = event;

    event.api.addPanel({
        id: 'test',
        component: 'default',
        position: {
            referencePanel: group.activePanel.id,
            direction: 'within',
        },
    });
};
/**
 * Called for drag-over events that do not originate from the dockview library,
 * allowing you to decide whether an overlay should be shown.
 */
const onReady = (event: DockviewReadyEvent) => {
    event.api.onUnhandledDragOver((e) => {
        e.accept();
    });
};

Customising the group drag ghost​

When the user drags a whole group of panels by its empty header area, Dockview shows a small floating ghost that follows the cursor. By default it renders the text Multiple Panels (N). To localise the label or replace the visual entirely, supply a createGroupDragGhostComponent factory. It receives the DockviewGroupPanel being dragged and must return an IGroupDragGhostRenderer.

The renderer must implement:

interface IGroupDragGhostRenderer {
    readonly element: HTMLElement;   // the ghost DOM element
    init(params: { group: IDockviewGroupPanel; api: DockviewApi }): void;
    dispose?(): void;
}

The ghost is captured by the browser at drag start and removed shortly after, so the component is short-lived; render synchronously enough to be painted before the browser snapshots the element.

See also​