Skip to main content

DnD compassEnterprise

By default Dockview resolves a drop from the quadrant of the target the cursor happens to be over. The DnD compass replaces that with an explicit, VS Code-style compass: a fixed cross of cells rendered over the group you are dragging over. You aim at a cell to choose the drop direction, and only the drops that are actually possible are shown.

Enabling the compass​

Enable the compass with the dndCompass option. With it off (the default) the existing cursor-quadrant behaviour is unchanged.

const api = createDockview(element, {
    // enable the compass with default configuration
    dndCompass: true,
});

While dragging over an accepting group the compass shows:

  • Inner cells (top / bottom / left / right / center): split this group on that edge, or center to tab into the group. These have the same result as today's cursor quadrants.
  • Outer cells (top / bottom / left / right): dock against the whole layout edge, even though the cursor is over a group.

A cell is only shown when a drop there is actually possible, so the compass reflects exactly the legal drops for the hovered target. The compass behaves identically for the HTML5 and pointer (touch / pen) drag backends, and renders over groups in floating containers and popout windows.

Configuration​

Pass an object instead of true to restrict the guide:

const api = createDockview(element, {
    dndCompass: {
        // only offer these inner cells (default: all accepted zones)
        zones: ['center'],
        // include the outer whole-layout-edge cells (default: true)
        edges: false,
    },
});
  • zones: restrict which inner cells appear. For example ['center'] allows reorder / merge only. Defaults to all zones the target accepts.
  • edges: include the outer whole-layout-edge cells. Defaults to true; set false for group-only docking.

See also​