fix: use document pointermove + getBoundingClientRect for touch-compatible hover detection

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Spikeysanju

src/lib/actions/droppable.spec.ts

@@ -419,47 +419,120 @@ describe('droppable', () => {
 		});
 	});
 
-	describe('Pointer events for touch/mouse fallback', () => {
-		it('should call onDragEnter on pointerover when dragging', () => {
+	describe('Pointer events for touch/mouse fallback (document pointermove)', () => {
+		beforeEach(() => {
+			// Give the node a known bounding rect: x:10, y:10 → x:110, y:110
+			vi.spyOn(node, 'getBoundingClientRect').mockReturnValue({
+				left: 10, top: 10, right: 110, bottom: 110,
+				width: 100, height: 100, x: 10, y: 10,
+				toJSON: () => ({})
+			});
+		});
+
+		function dispatchDocumentPointerMove(clientX: number, clientY: number) {
+			const event = new PointerEvent('pointermove', { bubbles: false, cancelable: false });
+			Object.defineProperty(event, 'clientX', { value: clientX });
+			Object.defineProperty(event, 'clientY', { value: clientY });
+			document.dispatchEvent(event);
+		}
+
+		it('should set targetContainer and add drag-over class when pointer enters bounds', () => {
+			const action = droppable(node, {
+				container: 'test',
+				attributes: { dragOverClass: 'drag-over' }
+			});
+
+			dndState.isDragging = true;
+			dispatchDocumentPointerMove(60, 60); // inside 10-110 bounds
+
+			expect(dndState.targetContainer).toBe('test');
+			expect(node.classList.contains('drag-over')).toBe(true);
+
+			action.destroy();
+		});
+
+		it('should call onDragEnter only once when pointer enters bounds', () => {
 			const onDragEnter = vi.fn();
 			const action = droppable(node, {
 				container: 'test',
 				callbacks: { onDragEnter }
 			});
 
 			dndState.isDragging = true;
-			node.dispatchEvent(new PointerEvent('pointerover', { bubbles: true }));
+			dispatchDocumentPointerMove(60, 60); // enter
+			dispatchDocumentPointerMove(70, 70); // still inside — should not fire again
+
+			expect(onDragEnter).toHaveBeenCalledTimes(1);
 
-			expect(onDragEnter).toHaveBeenCalled();
 			action.destroy();
 		});
 
-		it('should not call onDragEnter on pointerover when not dragging', () => {
+		it('should not call onDragEnter when pointer is outside bounds', () => {
 			const onDragEnter = vi.fn();
 			const action = droppable(node, {
 				container: 'test',
 				callbacks: { onDragEnter }
 			});
 
+			dndState.isDragging = true;
+			dispatchDocumentPointerMove(5, 5); // outside bounds (left: 10)
+
+			expect(onDragEnter).not.toHaveBeenCalled();
+
+			action.destroy();
+		});
+
+		it('should call onDragLeave and clear targetContainer when pointer leaves bounds', () => {
+			const onDragLeave = vi.fn();
+			const action = droppable(node, {
+				container: 'test',
+				callbacks: { onDragLeave }
+			});
+
+			dndState.isDragging = true;
+			dispatchDocumentPointerMove(60, 60); // enter
+			dispatchDocumentPointerMove(5, 5);  // leave
+
+			expect(onDragLeave).toHaveBeenCalledTimes(1);
+			expect(dndState.targetContainer).toBeNull();
+			expect(node.classList.contains('drag-over')).toBe(false);
+
+			action.destroy();
+		});
+
+		it('should not fire any events when not dragging', () => {
+			const onDragEnter = vi.fn();
+			const onDragLeave = vi.fn();
+			const action = droppable(node, {
+				container: 'test',
+				callbacks: { onDragEnter, onDragLeave }
+			});
+
 			dndState.isDragging = false;
-			node.dispatchEvent(new PointerEvent('pointerover', { bubbles: true }));
+			dispatchDocumentPointerMove(60, 60);
 
 			expect(onDragEnter).not.toHaveBeenCalled();
+			expect(onDragLeave).not.toHaveBeenCalled();
+
 			action.destroy();
 		});
 
-		it('should call onDragLeave on pointerout when dragging', () => {
+		it('should not call onDragLeave when leaving a different container', () => {
 			const onDragLeave = vi.fn();
 			const action = droppable(node, {
 				container: 'test',
 				callbacks: { onDragLeave }
 			});
 
 			dndState.isDragging = true;
-			dndState.targetContainer = 'test';
-			node.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+			dndState.targetContainer = 'other-container'; // something else is active
+			dispatchDocumentPointerMove(60, 60); // enter this node
+			dndState.targetContainer = 'other-container'; // simulate another container taking over
+			dispatchDocumentPointerMove(5, 5);  // leave this node bounds
+
+			// onDragLeave should not fire because targetContainer !== 'test'
+			expect(onDragLeave).not.toHaveBeenCalled();
 
-			expect(onDragLeave).toHaveBeenCalled();
 			action.destroy();
 		});
 	});

src/lib/actions/droppable.ts

@@ -88,6 +88,12 @@ export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) {
 	 */
 	let indicatorClass: 'drop-before' | 'drop-after' | 'drop-left' | 'drop-right' = 'drop-before';
 
+	/**
+	 * Tracks whether the pointer was inside this droppable on the previous
+	 * pointermove tick. Used to fire onDragEnter/onDragLeave on transitions only.
+	 */
+	let wasOver = false;
+
 	/**
 	 * Calculates whether the drop should be positioned before or after the target.
 	 *
@@ -224,6 +230,44 @@ export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) {
 		dndState.dropPosition = null;
 	}
 
+	/**
+	 * Handles document-level pointermove for touch-compatible hover detection.
+	 *
+	 * pointerover/pointerout do not fire on elements beneath the finger during
+	 * a touch drag — the pointer stays captured to the element where touch began.
+	 * This handler uses getBoundingClientRect to detect hover by coordinates,
+	 * which works on both mouse and touch devices.
+	 *
+	 * Fires onDragEnter/onDragLeave callbacks only on the transition between
+	 * inside/outside, not on every pointermove tick.
+	 */
+	function handleDocumentPointerMove(event: PointerEvent) {
+		if (options.disabled || !dndState.isDragging) return;
+
+		const rect = node.getBoundingClientRect();
+		const isOver =
+			event.clientX >= rect.left &&
+			event.clientX <= rect.right &&
+			event.clientY >= rect.top &&
+			event.clientY <= rect.bottom;
+
+		if (isOver) {
+			dndState.targetContainer = options.container;
+			node.classList.add(...dragOverClass);
+			updateDropIndicator(event.clientY, event.clientX);
+			if (!wasOver) {
+				options.callbacks?.onDragEnter?.(dndState as DragDropState<T>);
+			}
+		} else if (wasOver && dndState.targetContainer === options.container) {
+			dndState.targetContainer = null;
+			node.classList.remove(...dragOverClass);
+			clearDropIndicator();
+			options.callbacks?.onDragLeave?.(dndState as DragDropState<T>);
+		}
+
+		wasOver = isOver;
+	}
+
 	/**
 	 * Handles dragenter - item dragged into this drop zone.
 	 *
@@ -365,6 +409,7 @@ export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) {
 		dragEnterCounter = 0;
 		node.classList.remove(...dragOverClass);
 		clearDropIndicator();
+		wasOver = false;
 	}
 
 	/**
@@ -378,6 +423,7 @@ export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) {
 		dragEnterCounter = 0;
 		node.classList.remove(...dragOverClass);
 		clearDropIndicator();
+		wasOver = false;
 	}
 
 	/**
@@ -473,9 +519,7 @@ export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) {
 	document.addEventListener('dragend', handleGlobalDragEnd);
 
 	// Pointer events for custom drag support
-	node.addEventListener('pointerover', handlePointerOver);
-	node.addEventListener('pointermove', handlePointerMove);
-	node.addEventListener('pointerout', handlePointerOut);
+	document.addEventListener('pointermove', handleDocumentPointerMove);
 	node.addEventListener('pointerdrop-on-container', handlePointerDropOnContainer as EventListener);
 
 	// Return Svelte action lifecycle methods
@@ -506,9 +550,7 @@ export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) {
 			);
 			document.removeEventListener('dragenter', handleDocumentDragEnter);
 			document.removeEventListener('dragend', handleGlobalDragEnd);
-			node.removeEventListener('pointerover', handlePointerOver);
-			node.removeEventListener('pointermove', handlePointerMove);
-			node.removeEventListener('pointerout', handlePointerOut);
+			document.removeEventListener('pointermove', handleDocumentPointerMove);
 			node.removeEventListener(
 				'pointerdrop-on-container',
 				handlePointerDropOnContainer as EventListener