UGUI Image jumps its Rect Transform's anchor point when being dragged

Hello there

I am dragging a ugui image using RectTransformUtility.ScreenPointToLocalPointInRectangle(_parentRect,
eventData.delta,
Camera.main,
out _pos);
The problem is that when I click and drag, my image quickly snaps its anchor point (center) to the mouse pointer. This is clear when dragging the top circle from either the left or right edge, which causes a jump in position.

I’ve made a test case here: Dropbox - Error - Simplify your life

Would anyone please help me with this issue? Ideally the circle won’t move its anchored point to the position of the mouse, and it would change its position based on the physical space where the drag begin.

Thanks

You can add an offset to the anchor point by getting the offset when OnBeginDrag and applying the offset OnDrag.

This example works with canvas overlay set to Screen Space.

using UnityEngine;
using UnityEngine.EventSystems;

public class UI_ContainerDragHandler : MonoBehaviour, IDragHandler, IBeginDragHandler
{
    // Offset to UI anchor point
    Vector2 offset;

    // Get the offset by subtracting the anchor point from mouse pointer position
    public void OnBeginDrag(PointerEventData eventData)
    {
        offset = Input.mousePosition - transform.position;
    }

    // Moving the UI anchor to where the mouse pointer is minus the offset
    public void OnDrag(PointerEventData eventData)
    {
        transform.position = (Vector2)Input.mousePosition - offset;
    }
}