drag and drop in unity, drag behind other UI elements

Question

I have a Panel with a Grid Layout Group component. Inside I got a panel called slot with a background image and inside this I got a prefab of 2 images. it looks like this: I wrote a drag and drop script that found in the TankPrefab:

public class DragHandler : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
    public static GameObject itemBeingDragged;
    Vector3 startPosition;
    public void OnBeginDrag(PointerEventData eventData)
    {
        itemBeingDragged = gameObject;
        startPosition = transform.position;
    }
    public void OnDrag(PointerEventData eventData)
    {
        transform.position = Input.mousePosition;   
    }
    public void OnEndDrag(PointerEventData eventData)
    {
        itemBeingDragged = null;
        transform.position = startPosition;
    }
}

I have a problem when I drag a tank over a slot that found after the tank's slot. it draw the tank behind him: I tried transform.SetAsLastSibling(); in the OnBeginDrag but it only move it to be the first at the parent (the slot) and I want it to be above the other slots so I tried also transform.parent.SetAsLastSibling(); and at first it looks like it is working but after 2 drags the tank disappear

Answer 1

Try adding a "Canvas" component to your prefab and check "override sorting" and set sort order. I think I also had to add a graphic raycaster.

Inspector: