Use first child of drag overlay as collision rect (if available)

clauderic · Jun 21, 2021 · d245313 · d245313
1 parent c8849ea
commit d245313
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/packages/core/src/components/DndContext/DndContext.tsx b/packages/core/src/components/DndContext/DndContext.tsx
@@ -60,6 +60,7 @@ import {
   getEventCoordinates,
   rectIntersection,
 } from '../../utilities';
+import {getMeasurableNode} from '../../utilities/nodes';
 import {applyModifiers, Modifiers} from '../../modifiers';
 import type {
   Active,
@@ -218,7 +219,7 @@ export const DndContext = memo(function DndContext({
 
   const [overlayNodeRef, setOverlayNodeRef] = useNodeRef();
   const overlayNodeRect = useClientRect(
-    activeId ? overlayNodeRef.current : null,
+    activeId ? getMeasurableNode(overlayNodeRef.current) : null,
     willRecomputeLayouts
   );
 
@@ -249,8 +250,8 @@ export const DndContext = memo(function DndContext({
 
   const scrollAdjustedTranslate = add(modifiedTranslate, scrollAdjustment);
 
-  const translatedRect = activeNodeRect
-    ? getAdjustedRect(activeNodeRect, modifiedTranslate)
+  const translatedRect = draggingNodeRect
+    ? getAdjustedRect(draggingNodeRect, modifiedTranslate)
     : null;
 
   const collisionRect = translatedRect

diff --git a/packages/core/src/components/DragOverlay/hooks/useDropAnimation.ts b/packages/core/src/components/DragOverlay/hooks/useDropAnimation.ts
@@ -4,6 +4,7 @@ import {CSS, Transform, useIsomorphicLayoutEffect} from '@dnd-kit/utilities';
 import type {UniqueIdentifier} from '../../../types';
 import type {DraggableNodes} from '../../../store';
 import {getViewRect} from '../../../utilities';
+import {getMeasurableNode} from '../../../utilities/nodes';
 
 export interface DropAnimation {
   duration: number;
@@ -49,7 +50,7 @@ export function useDropAnimation({
       const finalNode = draggableNodes[activeId]?.node.current;
 
       if (transform && node && finalNode && finalNode.parentNode !== null) {
-        const fromNode = node.children.length > 1 ? node : node.children[0];
+        const fromNode = getMeasurableNode(node);
 
         if (fromNode) {
           const from = fromNode.getBoundingClientRect();

diff --git a/packages/core/src/utilities/nodes/getMeasurableNode.ts b/packages/core/src/utilities/nodes/getMeasurableNode.ts
@@ -0,0 +1,14 @@
+export function getMeasurableNode(
+  node: HTMLElement | undefined | null
+): HTMLElement | null {
+  if (!node) {
+    return null;
+  }
+
+  if (node.children.length > 1) {
+    return node;
+  }
+  const firstChild = node.children[0];
+
+  return firstChild instanceof HTMLElement ? firstChild : node;
+}
diff --git a/packages/core/src/utilities/nodes/index.ts b/packages/core/src/utilities/nodes/index.ts
@@ -0,0 +1 @@
+export {getMeasurableNode} from './getMeasurableNode';
diff --git a/stories/2 - Presets/Sortable/1-Vertical.story.tsx b/stories/2 - Presets/Sortable/1-Vertical.story.tsx
@@ -140,7 +140,7 @@ export const RerenderBeforeSorting = () => {
       {...props}
       wrapperStyle={({isDragging}) => {
         return {
-          height: isDragging ? 80 : undefined,
+          height: isDragging ? undefined : 200,
         };
       }}
     />