Callbacks

Event callbacks for drag, resize, and drop operations.

Overview

dnd-grid provides callbacks for drag, resize, drop, and layout changes.

Callback signature

Drag and resize callbacks receive an event object:

type GridDragEvent<TData = unknown> = {
  type: "dragStart" | "drag" | "dragEnd";
  layout: Layout<TData>;
  previousItem: LayoutItem<TData> | null | undefined;
  item: LayoutItem<TData> | null | undefined;
  placeholder: LayoutItem<TData> | null | undefined;
  event: Event;
  node: HTMLElement | null | undefined;
};

type GridResizeEvent<TData = unknown> = {
  type: "resizeStart" | "resize" | "resizeEnd";
  layout: Layout<TData>;
  previousItem: LayoutItem<TData> | null | undefined;
  item: LayoutItem<TData> | null | undefined;
  placeholder: LayoutItem<TData> | null | undefined;
  event: Event;
  node: HTMLElement | null | undefined;
  handle: ResizeHandleAxis;
};

Layout change

onLayoutChange(layout: Layout) => void

Fires whenever the layout changes. Use this to persist layout state.

Drag callbacks

onDragStart(event: GridDragEvent) => void

Fires when a drag operation begins.

onDrag(event: GridDragEvent) => void

Fires continuously during drag.

onDragEnd(event: GridDragEvent) => void

Fires when a drag operation ends.

Resize callbacks

onResizeStart(event: GridResizeEvent) => void

Fires when a resize operation begins.

onResize(event: GridResizeEvent) => void

Fires continuously during resize.

onResizeEnd(event: GridResizeEvent) => void

Fires when a resize operation ends.

Drop callbacks

onDrop(layout: Layout, item: LayoutItem | null | undefined, event: Event) => void

Fires when an external item is dropped onto the grid.

onDropDragOver(event?: DragOverEvent) => { w?: number; h?: number } | false | null | undefined

Called when an external item is dragged over the grid. Return size or false to reject the drop.

Performance

onDrag and onResize fire frequently. Avoid expensive work in these callbacks.

For expensive updates, prefer onDragEnd or onResizeEnd, or set callbackThrottle on DndGrid to limit call frequency.