Skip to content
ZenGrid

External DropZone

Enterprise

Introduction

Section titled “Introduction”

Rows don’t only move within the grid. An external drop zone lets the user drag a row out and drop it onto any DOM element you nominate — a trash bin, a “shortlist” panel, a kanban lane, another component entirely. RowDragManager runs the same pointer gesture and ghost it uses for reordering, but when the pointer is over a registered zone it suppresses the in-grid drop line and hands the drop to your callback. The grid is never mutated for an external drop — in managed or unmanaged mode — so the zone decides what happens: append to a list, remove the source row, POST to a server.

Register a zone with drag.addRowDropZone(zone):

import { RowDragManager, rowDragColumn } from '@zengrid/enterprise/grid';


const drag = new RowDragManager({ handle: true });
const grid = new Zengrid(mount, { columns: [rowDragColumn(), /* … */ ] });
grid.setData(rows);
drag.attach(grid);


const remove = drag.addRowDropZone({
  getContainer: () => document.querySelector('#trash'),
  onDragEnter: ({ container }) => container.classList.add('is-hot'),
  onDragLeave: ({ container }) => container.classList.remove('is-hot'),
  onDrop: ({ rowData }) => deleteRecord(rowData),
});
// remove()  → unregister the zone later

The zone contract

Section titled “The zone contract”

A zone is a plain object. Only getContainer is required — the four hooks are optional, fire in order across a drag, and each receives a RowDropZoneParams describing what’s being carried:

Member When it fires Use it to
getContainer() Every hit-test Return the target element (or null to skip). May return a live ref.
onDragEnter Pointer enters the zone Highlight the target.
onDragging Every move inside the zone Live feedback (position, preview).
onDragLeave Pointer leaves without dropping Undo the highlight.
onDrop Released over the zone Apply the outcome.

Every hook is handed the same shape:

RowDropZoneParams Meaning
fromRow / fromSource The dragged row’s on-screen and dataset indices.
rowData A copy of the dragged row’s source cells — read it freely.
container The zone element (what getContainer() returned).
event The underlying PointerEvent.

While the pointer is over a zone the manager also toggles a zg-row-drop-zone-active class on the container, so you get a default dashed highlight with zero code — restyle or replace it via the onDragEnter / onDragLeave hooks.

Managed and unmanaged both defer

Section titled “Managed and unmanaged both defer”

An external drop never reorders the grid — that’s the whole point, the row is leaving. This holds whether the manager is managed (in-grid drops reorder) or managed: false (in-grid drops do nothing). So a single manager can support both at once: drop inside the grid to reorder, drop on a zone to send the row elsewhere.

Try it live

Section titled “Try it live”

Grab a row’s ⠿ handle and drag it down onto the panel below the grid. Switch tabs to remove rows, collect a shortlist while in-grid reordering still works, and route rows to one of two zones with live hover feedback.

Drag the ⠿ handle onto the red bin. onDrop removes that row from the grid; onDragEnter/onDragLeave recolour the bin.

Next

Section titled “Next”