How to drag and drop an UI Image on a 2D GameObject?

Hi,

I am doing a game where the user have to drag an proteccion item (UI Imagen that is in the canvas) and drop it into a character (2D Game Object that is in the scene)

Cause i couldn't do it, I resolve it putting a drop zone area in the canvas but it is not what i want. My proteccions items have this code "DragInGameHandler":

   public void OnBeginDrag(PointerEventData eventData)
     {
         itemDragging = gameObject;
         startPosition = transform.position;
 
         startParent = transform.parent;
         transform.SetParent(dragPlayer);
     }
     public void OnDrag(PointerEventData eventData)
     {
         transform.position = Input.mousePosition;
     }
 
     public void OnEndDrag(PointerEventData eventData)
     {
         itemDragging = null; 
         if (transform.parent == dragPlayer)
         {
             transform.position = startPosition;
             transform.SetParent(startParent);
         }
     }

 

And my drop zone have this code (for each item it have especific stuff to do, so i identify my items by their tag):

     public void OnDrop(PointerEventData eventData)
     {     
         if (!item)
         {
             item = DragInGameHandler.itemDragging;
             item.transform.SetParent(transform);
         }
 
         if (item.tag == "protector")
         {
             //Especific stuff
         }
     }

I know that my problem is with the mouse position because canvas and the scene are different, but i do not know how to resolve it. Thanks for the help!