Only use width and height of overlay node

clauderic · Jun 22, 2021 · aebfd45 · aebfd45
1 parent b5d7813
commit aebfd45
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/packages/core/src/components/DndContext/DndContext.tsx b/packages/core/src/components/DndContext/DndContext.tsx
@@ -223,7 +223,7 @@ export const DndContext = memo(function DndContext({
     willRecomputeLayouts
   );
 
-  const draggingNodeRect = overlayNodeRect ?? activeNodeClientRect;
+  const draggingNodeRect = overlayNodeRect ?? activeNodeRect;
   const modifiedTranslate = applyModifiers(modifiers, {
     transform: {
       x: translate.x - nodeRectDelta.x,
@@ -250,9 +250,16 @@ export const DndContext = memo(function DndContext({
 
   const scrollAdjustedTranslate = add(modifiedTranslate, scrollAdjustment);
 
-  const translatedRect = draggingNodeRect
-    ? getAdjustedRect(draggingNodeRect, modifiedTranslate)
-    : null;
+  const rect =
+    overlayNodeRect && activeNodeRect
+      ? {
+          ...activeNodeRect,
+          height: overlayNodeRect.height,
+          width: overlayNodeRect.width,
+        }
+      : activeNodeRect;
+
+  const translatedRect = rect ? getAdjustedRect(rect, modifiedTranslate) : null;
 
   const collisionRect = translatedRect
     ? getAdjustedRect(translatedRect, scrollAdjustment)

diff --git a/stories/2 - Presets/Sortable/5-Virtualized.story.tsx b/stories/2 - Presets/Sortable/5-Virtualized.story.tsx
@@ -112,6 +112,9 @@ function Sortable({
                 overIndex: -1,
                 isDragOverlay: true,
               })}
+              wrapperStyle={{
+                padding: 5,
+              }}
               dragOverlay
             />
           ) : null}