Skip to content
ZenGrid

Row Dragging Customisation

Enterprise

Introduction

Section titled “Introduction”

Managed and unmanaged dragging decide what happens on drop. This page is about how the drag looks and feels — the four visual affordances RowDragManager (and its rowDragColumn() helper) let you shape:

  • the drag handle — the grip the user grabs;
  • the drag ghost — a floating label that follows the pointer;
  • the drop indicator — the line marking where the row will land;
  • the origin row — the row you picked up, while it’s in flight.

Every option below layers on top of the built-in look, so you restyle only what you want and keep the rest.

The drag handle

Section titled “The drag handle”

In { handle: true } mode the drag starts from a rowDragColumn() cell. That helper is fully presentational — swap the grip glyph, widen the column, label the header, or hang your own class on each handle cell:

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


const grid = new Zengrid(mount, {
  columns: [
    rowDragColumn({ glyph: '↕', width: 56, header: 'Move', className: 'my-grip' }),
    // …
  ],
});
new RowDragManager({ handle: true }).attach(grid);
rowDragColumn() option Default Effect
glyph '⠿' The grip character painted into each handle cell.
width 44 Column width in pixels.
header '' Header label for the grip column.
className — Extra CSS class on each handle cell — style the grip yourself.
field '__rowdrag__' Column id (carries no data).

The drag ghost

Section titled “The drag ghost”

Set ghost to show a floating preview that tracks the pointer through the drag. ghost: true labels it with the dragged row’s first cell; a config object customises the text, adds a class, and offsets it from the cursor:

const drag = new RowDragManager({
  ghost: {
    label: ({ fromRow, fromSource }) => `Moving row ${fromSource + 1}`,
    className: 'my-ghost',
    offset: { x: 16, y: 8 },
  },
});
ghost option Default Effect
label(ctx) first cell text Builds the ghost’s text; ctx has fromRow/fromSource.
className — Extra class on the ghost, on top of zg-row-drag-ghost.
offset { x: 12, y: 12 } Pixel gap between the pointer and the ghost.

The ghost carries the base class zg-row-drag-ghost (a coral pill) — restyle it globally through that class, or per-manager through className.

The drop indicator and the origin row

Section titled “The drop indicator and the origin row”

dropIndicatorClass adds a class to the drop line, and draggingRowClass stamps a class onto the row you picked up for as long as it’s in flight — dim it, tint it, whatever your CSS says. Both are additive: the built-in zg-row-drop-indicator line still renders, and the origin class is cleaned up automatically on drop.

const drag = new RowDragManager({
  dropIndicatorClass: 'my-drop-line',   // restyle the landing line
  draggingRowClass: 'is-dragging',      // fade/tint the source row
});

Try it live

Section titled “Try it live”

Grab a row and drag it — then switch tabs to see each affordance customised on its own.

rowDragColumn() takes glyph/width/header/className. Grab the ↕ grip to drag; the custom class tints it.

Next

Section titled “Next”