Skip to main content

Dnd

The dock makes heavy use of drag and drop functionalities.

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 method to help determine whether external drag events should be interacted with or not.

The onDidDrop handler and onUnhandledDragOverEvent 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 onUnhandledDragOverEvent 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.onUnhandledDragOverEvent((e) => {
        e.accept();
    });
};

Customizing 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 localize 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.

Third Party Dnd Libraries​

This shows a simple example of a third-party library used inside a panel that relies on drag and drop functionalities. This examples serves to show that dockview doesn't interfer with any drag and drop logic for other controls.

Newsletter