Fix advanced collision demo scrolling

Author: niklasramo

packages/dragdoll-docs/docs/examples.md

@@ -3239,7 +3239,6 @@ import {
   DndObserverEventType,
   Draggable,
   Droppable,
-  getLocalOffset,
   KeyboardMotionSensor,
   PointerSensor,
 } from 'dragdoll';
@@ -3252,12 +3251,77 @@ const defaultPredicate = createDefaultStartPredicate<PointerSensor | KeyboardMot
 
 // Keep track of the best match droppable.
 const bestMatchMap: Map<AnyDraggable, Droppable> = new Map();
+const originalElementMap: Map<string, HTMLElement> = new Map();
+
+const dragContainer = document.getElementById('drag-container') as HTMLElement;
+const ANIMATION_EPSILON = 0.5;
 
 // Get elements.
 const scrollContainers = [...document.querySelectorAll('.scroll-list')] as HTMLElement[];
 const draggableElements = [...document.querySelectorAll('.draggable')] as HTMLElement[];
 const droppableElements = [...document.querySelectorAll('.droppable')] as HTMLElement[];
 
+function createDragPreviewElement(element: HTMLElement, draggableId: string): HTMLElement {
+  const rect = element.getBoundingClientRect();
+  const clone = element.cloneNode(true) as HTMLElement;
+  clone.style.position = 'fixed';
+  clone.style.width = `${rect.width}px`;
+  clone.style.height = `${rect.height}px`;
+  clone.style.left = `${rect.left}px`;
+  clone.style.top = `${rect.top}px`;
+  clone.style.transform = '';
+  clone.classList.add('drag-preview', 'dragging');
+  clone.setAttribute('aria-hidden', 'true');
+  clone.setAttribute('data-id', draggableId);
+  clone.tabIndex = -1;
+  dragContainer.appendChild(clone);
+  return clone;
+}
+
+function cleanupDrag(
+  previewElement: HTMLElement | null,
+  originalElement: HTMLElement | null,
+  bestMatch: Droppable | null,
+  draggable: AnyDraggable,
+) {
+  previewElement?.remove();
+  originalElement?.classList.remove('dragging', 'hidden');
+  bestMatch?.element?.removeAttribute('data-draggable-over');
+  bestMatchMap.delete(draggable);
+}
+
+function findBestMatch(contacts: ReadonlySet<Droppable>, draggableId: string): Droppable | null {
+  for (const droppable of contacts) {
+    // Skip if the droppable contains a different draggable.
+    const containedDraggableId = droppable.element?.getAttribute('data-draggable-contained') || '';
+    if (containedDraggableId && containedDraggableId !== draggableId) {
+      continue;
+    }
+
+    // Skip if a different draggable is over the droppable.
+    const overDraggableId = droppable.element?.getAttribute('data-draggable-over') || '';
+    if (overDraggableId && overDraggableId !== draggableId) {
+      continue;
+    }
+
+    return droppable;
+  }
+
+  return null;
+}
+
+function getTargetPosition(container: HTMLElement) {
+  const rect = container.getBoundingClientRect();
+  const style = getComputedStyle(container);
+  const borderLeft = parseFloat(style.borderLeftWidth || '0') || 0;
+  const borderTop = parseFloat(style.borderTopWidth || '0') || 0;
+
+  return {
+    left: rect.left + borderLeft + 10,
+    top: rect.top + borderTop + 10,
+  };
+}
+
 // Initialize DndObserver.
 const dndObserver = new DndObserver<AdvancedCollisionData>({
   collisionDetector: (ctx) => new AdvancedCollisionDetector(ctx),
@@ -3273,28 +3337,23 @@ for (const droppableElement of droppableElements) {
 // Create draggables.
 const draggables: AnyDraggable[] = [];
 for (const draggableElement of draggableElements) {
+  const draggableId = draggableElement.getAttribute('data-id') || '';
+  if (draggableId === '') continue;
+
+  originalElementMap.set(draggableId, draggableElement);
+
   const draggable = new Draggable(
     [new PointerSensor(draggableElement), new KeyboardMotionSensor(draggableElement)],
     {
-      // Only move the draggable element.
-      elements: () => [draggableElement],
-      // Use the drag container (has contain: layout).
-      container: document.getElementById('drag-container') as HTMLElement,
-      // Freeze the width and height of the dragged element since we are using
-      // a custom container and the element has percentage based values for
-      // some of its properties.
+      // Move a fixed-position clone, not the focused original element.
+      elements: () => [createDragPreviewElement(draggableElement, draggableId)],
       frozenStyles: () => ['width', 'height'],
-      // Allow the drag to start only if the element is not animating; otherwise
+      // Allow the drag to start only if the element is not hidden; otherwise
       // defer to the default predicate (touch long-press, mouse threshold).
       startPredicate: (data) =>
-        draggableElement.classList.contains('animate') ? false : defaultPredicate(data),
-      // Toggle the dragging class on the draggable element when the drag starts
-      // and ends.
+        draggableElement.classList.contains('hidden') ? false : defaultPredicate(data),
       onStart: () => {
-        draggableElement.classList.add('dragging');
-      },
-      onEnd: () => {
-        draggableElement.classList.remove('dragging');
+        draggableElement.classList.add('dragging', 'hidden');
       },
     },
   ).use(
@@ -3317,33 +3376,16 @@ dndObserver.addDraggables(draggables);
 
 // On draggable collision with droppables.
 dndObserver.on(DndObserverEventType.Collide, ({ draggable, contacts }) => {
-  // Get the draggable element.
-  const draggableElement = draggable.drag?.items[0].element as HTMLElement | null;
-  if (!draggableElement) return;
+  // Get the drag preview element.
+  const previewElement = draggable.drag?.items[0].element as HTMLElement | null;
+  if (!previewElement) return;
 
   // Get the draggable id.
-  const draggableId = draggableElement.getAttribute('data-id') || '';
+  const draggableId = previewElement.getAttribute('data-id') || '';
   if (draggableId === '') return;
 
   // Get the next best match droppable.
-  let nextBestMatch: Droppable | null = null;
-  for (const droppable of contacts) {
-    // Skip if the droppable contains a different draggable.
-    const containedDraggableId = droppable.element?.getAttribute('data-draggable-contained') || '';
-    if (containedDraggableId && containedDraggableId !== draggableId) {
-      continue;
-    }
-
-    // Skip if a different draggable is over the droppable.
-    const overDraggableId = droppable.element?.getAttribute('data-draggable-over') || '';
-    if (overDraggableId && overDraggableId !== draggableId) {
-      continue;
-    }
-
-    // We found the next best match.
-    nextBestMatch = droppable;
-    break;
-  }
+  const nextBestMatch = findBestMatch(contacts, draggableId);
 
   // Update the best match droppable if it's changed.
   const bestMatch = bestMatchMap.get(draggable);
@@ -3356,71 +3398,63 @@ dndObserver.on(DndObserverEventType.Collide, ({ draggable, contacts }) => {
 
 // On drag end.
 dndObserver.on(DndObserverEventType.End, ({ draggable, canceled }) => {
-  const draggableElement = draggable.drag?.items[0].element as HTMLElement | null;
-  if (!draggableElement) return;
+  const previewElement = draggable.drag?.items[0].element as HTMLElement | null;
+  if (!previewElement) return;
+
+  const draggableId = previewElement.getAttribute('data-id') || '';
+  if (draggableId === '') return;
+
+  const originalElement = originalElementMap.get(draggableId) || null;
 
   // Find out the original container and the target container based on the best
   // match droppable.
   const bestMatch = bestMatchMap.get(draggable);
-  const originalContainer = draggableElement.parentElement!;
+  const originalContainer = originalElement?.parentElement as HTMLElement | null;
   const targetContainer =
     !canceled && bestMatch ? (bestMatch.element as HTMLElement) : originalContainer;
 
-  // Record the element's current viewport position before any DOM changes.
-  const rect = draggableElement.getBoundingClientRect();
+  if (!originalElement || !originalContainer || !targetContainer) {
+    cleanupDrag(previewElement, originalElement, bestMatch || null, draggable);
+    return;
+  }
 
-  // Clear the drag-applied transform so the element returns to its natural
-  // CSS position within whichever container it ends up in.
-  draggableElement.style.transform = '';
+  const baseLeft = parseFloat(previewElement.style.left || '0');
+  const baseTop = parseFloat(previewElement.style.top || '0');
+  const targetPos = getTargetPosition(targetContainer);
+  const currentPos = previewElement.getBoundingClientRect();
+  const deltaX = targetPos.left - currentPos.left;
+  const deltaY = targetPos.top - currentPos.top;
 
-  // If draggable moved into a different container.
+  // If draggable moved into a different container, commit the original hidden
+  // element to the new slot.
   if (originalContainer !== targetContainer) {
-    targetContainer.appendChild(draggableElement);
+    targetContainer.appendChild(originalElement);
 
     // Move the data-draggable-contained attribute to the target container.
     originalContainer.removeAttribute('data-draggable-contained');
-    targetContainer.setAttribute(
-      'data-draggable-contained',
-      draggableElement.getAttribute('data-id')!,
-    );
+    targetContainer.setAttribute('data-draggable-contained', draggableId);
   }
 
-  // Compute the CSS offset delta that maintains the element's viewport
-  // position. getLocalOffset accounts for any ancestor transforms (scale,
-  // rotation, skew) on the container.
-  const delta = getLocalOffset(draggableElement, rect.x, rect.y);
-
   // Skip animation if the element is already at its target position.
-  if (Math.abs(delta.x) < 0.5 && Math.abs(delta.y) < 0.5) {
-    bestMatch?.element?.removeAttribute('data-draggable-over');
-    bestMatchMap.delete(draggable);
+  if (Math.abs(deltaX) < ANIMATION_EPSILON && Math.abs(deltaY) < ANIMATION_EPSILON) {
+    cleanupDrag(previewElement, originalElement, bestMatch || null, draggable);
     return;
   }
 
-  // Apply transform to hold the element at its drag-end viewport position.
-  draggableElement.style.transform = `translate(${delta.x}px, ${delta.y}px)`;
+  const finalTranslateX = targetPos.left - baseLeft;
+  const finalTranslateY = targetPos.top - baseTop;
 
-  // Force a reflow to commit the starting transform BEFORE adding the
-  // transition. Without this the browser's last committed state for transform
-  // is "none" (from the getLocalOffset reflow), and the transition has no
-  // starting point to animate from.
-  draggableElement.clientHeight;
+  previewElement.classList.add('animating');
+  previewElement.clientHeight;
+  previewElement.style.transform = `translate(${finalTranslateX}px, ${finalTranslateY}px)`;
 
-  // Now enable the transition and animate to identity.
-  draggableElement.classList.add('animate');
   const onTransitionEnd = (e: TransitionEvent) => {
-    if (e.target === draggableElement && e.propertyName === 'transform') {
-      draggableElement.classList.remove('animate');
-      draggableElement.style.transform = '';
+    if (e.target === previewElement && e.propertyName === 'transform') {
+      cleanupDrag(previewElement, originalElement, bestMatch || null, draggable);
       document.body.removeEventListener('transitionend', onTransitionEnd);
     }
   };
   document.body.addEventListener('transitionend', onTransitionEnd);
-  draggableElement.style.transform = 'matrix(1, 0, 0, 1, 0, 0)';
-
-  // Reset the best match droppable.
-  bestMatch?.element?.removeAttribute('data-draggable-over');
-  bestMatchMap.delete(draggable);
 });
 ```
 
@@ -3576,8 +3610,18 @@ body {
   width: calc(100% - 20px);
   height: calc(100% - 20px);
   z-index: 100;
+}
+
+.card.draggable.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.drag-preview {
+  z-index: 1000;
+  pointer-events: none;
 
-  &.animate {
+  &.animating {
     transition: transform 0.3s cubic-bezier(0.33, 0.975, 0, 1.65);
   }
 }

packages/dragdoll-docs/docs/react/examples.md

@@ -3994,7 +3994,9 @@ function createDragPreviewElement(element: HTMLElement, draggableId: string): HT
   clone.style.top = `${rect.top}px`;
   clone.style.transform = '';
   clone.classList.add('drag-preview', 'dragging');
+  clone.setAttribute('aria-hidden', 'true');
   clone.setAttribute('data-id', draggableId);
+  clone.tabIndex = -1;
   dragContainer.appendChild(clone);
   return clone;
 }

packages/dragdoll-docs/docs/solid/examples.md

@@ -3495,7 +3495,9 @@ function createDragPreviewElement(element: HTMLElement, draggableId: string): HT
   clone.style.top = `${rect.top}px`;
   clone.style.transform = '';
   clone.classList.add('drag-preview', 'dragging');
+  clone.setAttribute('aria-hidden', 'true');
   clone.setAttribute('data-id', draggableId);
+  clone.tabIndex = -1;
   dragContainer.appendChild(clone);
   return clone;
 }

packages/dragdoll-docs/examples/core/015-dnd-advanced-collision-detector/index.css

@@ -70,8 +70,18 @@ body {
   width: calc(100% - 20px);
   height: calc(100% - 20px);
   z-index: 100;
+}
+
+.card.draggable.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.drag-preview {
+  z-index: 1000;
+  pointer-events: none;
 
-  &.animate {
+  &.animating {
     transition: transform 0.3s cubic-bezier(0.33, 0.975, 0, 1.65);
   }
 }