Fix drag-and-drop hover detection and slot targeting

Two root-cause bugs fixed:

1. Port <button> elements inside ModuleBlock had pointer-events:auto (browser
   default), so document.elementFromPoint() hit them instead of the RackSlot
   behind them whenever the cursor was over an occupied slot. Fixed by toggling
   body.rack-dragging during any drag, which applies a CSS rule that forces
   pointer-events:none !important on .module-block and all descendants.

2. onDragMove pointer-position reconstruction (activatorEvent.clientX + delta.x)
   was slightly off because delta is measured from the initial mousedown, not
   the activation point. Replaced with a native window pointermove listener
   (capture phase) that gives exact clientX/Y — no reconstruction needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-22 08:57:22 -05:00
parent c9aed96400
commit 55ee1dea93
3 changed files with 46 additions and 24 deletions

View File

@@ -116,7 +116,7 @@ export function ModuleBlock({ module }: ModuleBlockProps) {
{...listeners}
{...attributes}
className={cn(
'relative w-full border-l-4 select-none overflow-hidden transition-opacity',
'module-block relative w-full border-l-4 select-none overflow-hidden transition-opacity',
colors.bg,
colors.border,
isDragging ? 'opacity-0 pointer-events-none' : 'cursor-grab active:cursor-grabbing',