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<WillShowOverlayLocationEvent>

Drag And Drop

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

<DockviewReact
  {...props}
   rootOverlayModel={{
    size: { value: 100, type: 'pixels' },
    activationSize: { value: 5, type: 'percentage' },
  }}
  />

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.

/**
 * called when an ondrop event which does not originate from the dockview libray and
 * passes the showDndOverlay condition occurs
 **/
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 which do not originate from the dockview library
 * allowing the developer to decide where the overlay should be shown for a
 * particular drag event
 **/
const showDndOverlay = (event: DockviewDndOverlayEvent) => {
    return true;
};

return (
    <DockviewReact
        components={components}
        onReady={onReady}
        className="dockview-theme-abyss"
        onDidDrop={onDidDrop}
        showDndOverlay={showDndOverlay}
    />
);

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.