fix: fix the offset produced by the scroll

src/dd-draggable.ts

@@ -317,16 +317,20 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     const style = this.helper.style;
     const { scaleX, scaleY } = Utils.getScaleForElement(this.helper);
     const transformParent = Utils.getContainerForPositionFixedElement(this.helper);
+    const scrollParent = Utils.getScrollElement(this.helper);
     // We need to be careful here as the html element actually also includes scroll
     // so in this case we always need to ignore it
-    const transformParentRect = transformParent === document.documentElement ? { top: 0, left: 0 } : transformParent.getBoundingClientRect();
+    const transformParentRect =  transformParent !== document.documentElement ? transformParent.getBoundingClientRect() : { top: 0, left: 0 };
     // when an element is scaled, the helper is positioned relative to the first transformed parent, so we need to remove the extra offset
+    const scroll = transformParent === scrollParent && transformParent !== document.documentElement
+      ? { top: scrollParent.scrollTop, left: scrollParent.scrollLeft }
+      : { top: 0, left: 0 };
     const offsetX = transformParentRect.left;
     const offsetY = transformParentRect.top;
 
     // Position the element under the mouse
-    const x = (e.clientX - offsetX - (this.origRelativeMouse?.x || 0)) / scaleX;
-    const y = (e.clientY - offsetY - (this.origRelativeMouse?.y || 0)) / scaleY;
+    const x = (e.clientX - offsetX - (this.origRelativeMouse?.x || 0)) / scaleX + scroll.left;
+    const y = (e.clientY - offsetY - (this.origRelativeMouse?.y || 0)) / scaleY + scroll.top;
     style.left = `${x}px`;
     style.top = `${y}px`;
   }
@@ -343,28 +347,20 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  /** @internal TODO: set to public as called by DDDroppable! */
+  /** @internal */
   public ui(): DDUIData {
     const containmentEl = this.el.parentElement;
     const scrollElement = Utils.getScrollElement(this.el.parentElement);
     const containmentRect = containmentEl.getBoundingClientRect();
     const offset = this.helper.getBoundingClientRect();
     const { scaleX, scaleY } = Utils.getScaleForElement(this.helper);
 
-    // When an element is inside a scrolled element, the boundingClientRect will return the position of the element minus the scroll.
-    const parentPositionIncludingScroll = containmentEl === scrollElement
-      ? { top: containmentRect.top + scrollElement.scrollTop, left: containmentRect.left + scrollElement.scrollLeft }
-      : { top: containmentRect.top, left: containmentRect.left };
-
+    const scroll = containmentEl.contains(scrollElement) ? scrollElement : { scrollTop: 0, scrollLeft: 0 };
     return {
       position: { // Current CSS position of the helper as { top, left } object
-        top: (offset.top - parentPositionIncludingScroll.top) / scaleY,
-        left: (offset.left - parentPositionIncludingScroll.left) / scaleX,
+        top: (offset.top - containmentRect.top) / scaleY + scroll.scrollTop,
+        left: (offset.left - containmentRect.left) / scaleX + scroll.scrollLeft,
       }
-      /* not used by GridStack for now...
-      helper: [this.helper], //The object arr representing the helper that's being dragged.
-      offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.
-      */
     };
   }
 }