Dragging an object from a panel with a mask on to another panel?

Ok basically what I have is menu for storing buttons/images with a mask and scroll rect and as a child under it is a container for the buttons and the buttons are children in that container.

I have this simple drag code that allows me to drag items and place around the container, but if I try and drag it too far the buttons will rest back to there normal original positions. All want I to do is to be able to drag these buttons away from the menu they are in and drop them freely on another panel. Can someone please help with a simple to understand method, I've looked through inventory drag and drop tutorials, but they are not what I want as they usually involve dropping the object into gird format slot.

 using UnityEngine;
 using UnityEngine.EventSystems;
 using UnityEngine.UI;
 public class Draggable : MonoBehaviour, IDragHandler,IBeginDragHandler,IEndDragHandler
 {
     private Image image;
 
     private void Awake()
     {
         image = GetComponent<Image> ();
     }
 
     public void OnBeginDrag(PointerEventData eventData)
     {   
         image.color = Color.black;
 
     }
     public void OnDrag(PointerEventData eventData)
     { 
         transform.position = eventData.position;
     }
     public void OnEndDrag(PointerEventData eventData)
     {
         image.color = Color.white;
     }
 }

I've seen a similar post- https://answers.unity.com/questions/1137413/is-it-possible-to-drag-ui-item-from-scrollrect-to.html Where setting the parent can fix the problem , but there is no code and am unsure how to apply it to my own code.