#647·draggable

bug : Drag offset error when CSS `zoom` is applied to container

Author: 3aluwCreated Jul 31, 2025Updated Jul 31, 2025

** Production Link** codepen

** Related Issue** #139 – Same issue occurring when using transform: scale() instead of zoom.


Description

We have a drag-and-drop container that users can zoom (e.g., zoom out to get a better overview). The zoom is applied by setting the CSS zoom property on the parent container of the drag-and-drop area.

However, once zoom is applied, the drag-and-drop behavior becomes misaligned:

  • When you start dragging an item, it immediately shifts away from the cursor.
  • The item's position is offset and no longer tracks the mouse correctly.
  • It appears the drag-and-drop logic does not account for the zoom level applied to the container.
  • the drop behavior is fine and follows the cursor

⚙️ Technical Details

  • Zooming is done via zoom: 0.8 on the container.
  • The issue is similar to #139, which involves the same problem when using transform: scale().

✅ Expected Behavior

Dragging should behave normally and accurately follow the pointer, even when the container is zoomed using CSS zoom.