Confirmed Nestable touch drag offset is incorrect on scrolled pages

Painbaker

Well-known member
Licensed customer
Affected version
2.3.13
Nestable.js dragStart() mixes document-relative pageX/pageY with viewport-relative getBoundingClientRect().

On touch devices scrolling offsets the dragged item away from the finger

Suggested fix - use coordinates from the same coordinate system:


Diff:
diff --git a/js/xf/nestable.js b/js/xf/nestable.js
--- a/js/xf/nestable.js
+++ b/js/xf/nestable.js
@@ -428,8 +428,9 @@
 
 			this.placeEl.style.height = `${ dragItem.offsetHeight }px`
 
-			const offsetX = e.offsetX !== undefined ? e.offsetX : e.pageX - target.getBoundingClientRect().left
-			const offsetY = e.offsetY !== undefined ? e.offsetY : e.pageY - target.getBoundingClientRect().top
+			const targetRect = target.getBoundingClientRect()
+			const offsetX = e.offsetX !== undefined ? e.offsetX : e.clientX - targetRect.left
+			const offsetY = e.offsetY !== undefined ? e.offsetY : e.clientY - targetRect.top
 			this.mouse = {
 
Back
Top Bottom