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

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.