Frontmatter
| id | 8977 |
| title | Implement Surgical DOM Move for Component Columns in Drag Proxy |
| state | Closed |
| labels | enhancementaiperformance |
| assignees | tobiu |
| createdAt | Feb 4, 2026, 1:37 AM |
| updatedAt | Feb 4, 2026, 2:07 AM |
| githubUrl | https://github.com/neomjs/neo/issues/8977 |
| author | tobiu |
| commentsCount | 2 |
| parentIssue | 8964 |
| subIssues | [] |
| subIssuesCompleted | 0 |
| subIssuesTotal | 0 |
| blockedBy | [] |
| blocking | [] |
| closedAt | Feb 4, 2026, 2:02 AM |
Implement Surgical DOM Move for Component Columns in Drag Proxy
tobiu added parent issue #8964 on Feb 4, 2026, 1:37 AM
tobiu assigned to @tobiu on Feb 4, 2026, 1:38 AM

tobiu
Feb 4, 2026, 2:02 AM
Input from Gemini 3 Pro:
✦ Implemented the "Surgical DOM Move" optimization for drag proxies.
Changes:
- Refactored
createDragProxy:
- Detects component-based cells (e.g. Sparklines).
- Uses
Neo.applyDeltasto physically move the cell content (first child) into the proxy after it mounts.- Inherits
grid.clsto ensure custom app styling (e.g.,devrank-grid-container) persists in the proxy.- Updated
onDragEnd:
- Restores moved components to their original grid cells before destroying the proxy.
- Enhanced Documentation:
- Added comprehensive JSDoc explaining the "Surgical DOM Move" and "Disjoint Updates" patterns in
SortZone.mjs.Result: Drag operations for heavy components like
OffscreenCanvasare now performant (no re-instantiation) and visually perfect (live state preserved).
tobiu closed this issue on Feb 4, 2026, 2:02 AM

tobiu
Feb 4, 2026, 2:07 AM
resolved.
For component-based columns (specifically heavy ones like
Sparklineusing OffscreenCanvas), cloning instances for the Drag Proxy is resource-intensive and complex.Optimization Strategy: Surgical Content Move Instead of creating new component instances, we will "borrow" the DOM content from the grid cells and temporarily move it into the drag proxy using
Neo.applyDeltas(bypassing VDOM logic).The DOM Structure:
<!-- Grid Cell Container (Stays in Grid) --> <div id="neo-grid-body-1__row-0__activity" ... class="neo-grid-cell" ...> <!-- Content Wrapper (Moves to Proxy) --> <div id="neo-sparkline-1__wrapper" class="neo-sparkline-wrapper"> <canvas id="neo-sparkline-1" ...></canvas> </div> </div>Implementation Plan:
Drag Start (
createDragProxy):Neo.applyDeltastomoveNodethis Content Wrapper into the corresponding cell container within the Drag Proxy.During Drag:
Drag End (
onDrop):Neo.applyDeltastomoveNodethe Content Wrapper back to its original Cell Container (neo-grid-body-1__row-0__activity).Benefits: