Frontend · JavaScript

Drag-and-Drop Row Reordering Inside a Virtual-Scrolling Table

By 天才熊猫君 · Aug 27, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Virtual scrolling is standard for large datasets, but row reordering has been a gap — most solutions fall back to index-based logic that breaks when rows are filtered or recycled. This approach decouples drag-and-drop from the DOM entirely, making it safe for any flat virtual-scrolled list.

Summary

Dragging a row to a new position in a virtual-scrolling table breaks the usual DOM-based approach: the target row may not be rendered, and indices shift under filtering. This composable solves it by anchoring everything on a stable row ID (`Idd`) and converting mouse screen coordinates into content-space coordinates relative to the first rendered row's `offsetTop`. Dividing the offset by a fixed row height and rounding gives a window insertion index, which maps back to a target `Idd` — including `null` for "insert at end."

The overscan buffer rows that virtual scrollers already keep above and below the viewport turn out to be essential for precision: without them, dragging to the visible bottom would always resolve to "end of data" instead of "before the next off-screen row." A ghost row follows the pointer via `transform: translateY`, an indicator line reuses the same coordinate calculation, and auto-scrolling kicks in near the container edges, recalculating the target every frame since the render window shifts.

The full implementation is a single Vue 3 composable (`useVirtualDragSort`) that takes `rowHeight`, the reactive `showGridData` window, a scroll-container computed ref, and an `onSort(fromIdd, toIdd)` callback. It handles edge cases like dragging the last row, clamping out-of-bounds coordinates, and cleaning up ResizeObserver, rAF loops, and global listeners on unmount.

Takeaways

— All drag logic uses stable row IDs (`Idd`) instead of volatile indices, so filtering and scrolling don't corrupt the target.

— Mouse `clientY` is converted to content-space Y by adding `container.scrollTop` and subtracting the container's bounding rect top.

— The first rendered row's `offsetTop` serves as a fixed anchor; subtracting it from the mouse's content Y and dividing by `rowHeight` gives the exact row offset.

— `Math.round(exact)` naturally implements "upper half of a row inserts before it, lower half inserts after."

— The overscan buffer rows in `showGridData` prevent edge-of-viewport drags from always resolving to "end of list" — they supply the next off-screen row's ID.

— The indicator line's `top` is simply `firstRowTopInContent + insertIndex * rowHeight`, reusing the same calculation with no extra DOM query.

— A `position: fixed` ghost row with `pointer-events: none` and `transform: translateY` avoids layout thrashing and event interference.

— Auto-scrolling recalculates the target every rAF frame because scrolling changes the render window and may replace the first row element.

— On pointerup, a move is only valid if `toIdd` differs from both `fromIdd` and `fromNextIdd`, preventing false positives when dropping on the same row's upper half.

— The composable cleans up global listeners, the ghost row, the indicator, ResizeObserver, and rAF loops on component unmount.

Conclusions

Virtual scrolling's overscan buffer — usually justified only for scroll smoothness — turns out to be the mechanism that makes edge-of-viewport drop targeting precise. Without it, the algorithm degrades to a coarse "end of list" guess.

The entire coordinate system collapses to a single subtraction and division because the first rendered row's `offsetTop` is a stable content-space anchor that doesn't depend on scroll position. This sidesteps the usual mess of tracking which rows are currently in the DOM.

Using `fromNextIdd` (the ID of the row after the dragged row) as the definition of "original position" handles the case where dropping on the dragged row's own upper half would otherwise look like a move. It's a small state detail that eliminates a whole class of false-positive reorderings.

The design keeps the composable's internal drag state as a plain object rather than a reactive ref, avoiding Vue's proxy overhead on high-frequency pointermove events — a practical performance choice that many composables overlook.

Concepts & terms

Overscan (buffer rows)

Extra rows rendered above and below the visible viewport in a virtual scroller. They prevent blank areas during fast scrolling and, in this drag-sort scheme, provide the ID of the next row beyond the visible edge so drop targeting stays precise.

Content coordinate system

A Y-axis space where positions are relative to the top of the scrollable content, not the viewport. Converting mouse `clientY` into this space (by adding `scrollTop`) lets it compare directly with row `offsetTop` values.

Ghost row

A `position: fixed` clone of the dragged row that follows the pointer. It uses `pointer-events: none` so it never intercepts events, and `transform: translateY` for movement to avoid triggering layout.

fromNextIdd

The ID of the row immediately after the dragged row in the current render window. It defines "original position" as "still before this row," and is used on pointerup to filter out drops that didn't actually change ordering.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗