Skip to main content

Drop overlay

When you drag a panel or group over Dockview, a highlighted overlay previews where it will land. The dropOverlayModel option lets you shape that overlay per drop target — its size, the activation threshold, and the small-element boundaries.

dropOverlayModel replaces the v6 rootOverlayModel option. Where rootOverlayModel was a single static model, dropOverlayModel is a callback invoked per target. See Migrating to v7.

Usage​

dropOverlayModel is a callback that receives the target and returns a DroptargetOverlayModel, or undefined to keep the default for that target:

const options = {
    dropOverlayModel: (params) => {
        // params.location: which drop target ('tab' | 'header_space' | 'content')
        // params.group: the group the target belongs to, where known
        if (params.location === 'content') {
            return {
                size: { value: 100, type: 'pixels' },
            };
        }
        return undefined; // default overlay for other targets
    },
};

The returned model accepts:

FieldDescription
sizeThe size of the highlighted overlay region.
activationSizeHow close the pointer must be to a target before it activates.
smallWidthBoundaryWidth (px) below which the overlay switches to a thin-border indicator instead of a half-width highlight. Set 0 to always show the half-width overlay.
smallHeightBoundaryHeight (px) below which the overlay switches to a thin-border indicator instead of a half-height highlight. Set 0 to always show the half-height overlay.

The outer edge overlay​

dropOverlayModel does not dispatch the 'edge' target — the overlay shown when dragging to the outer edges of the whole layout. That is configured separately via the dndEdges option. If you were using rootOverlayModel purely to size the outer edge overlay, use dndEdges instead.

Newsletter