UI in world space drag and drop does not align with mouse

Question

Im doing a UI that is in World Space and i am getting strange behaviour when doing drag and drop.

https://i.imgur.com/MBZ8gNH.mp4

This is the code:

public void OnDrag(PointerEventData eventData)
{
    if (!image.enabled) return;

    var newPosition = rectTrans.anchoredPosition + eventData.delta * canvas.scaleFactor;
    var newX = Mathf.Clamp(newPosition.x, leftSibling.x, rightSibling.x);
    var newY = Mathf.Clamp(newPosition.y, 0, height);

    rectTrans.anchoredPosition = new Vector2(newX, newY) / canvas.scaleFactor;
}

Answer 1

This one solved it for me:

reactTranform.anchoredPosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);