Set Layer of UI Object being Dragged

Question

In my game, I have an inventory system with slots and images in those slots. The images are by default disabled, but when an item is added to the slot, the image component becomes enabled. I have implemented a very simple drag and drop system for moving objects around in the inventory using IBeginDragHandler, IDragHandler, and IEndDragHandler. As I am dragging an item from one slot to another, I want the item image to be rendered in front of the slots and the rest of the inventory. Currently, when dragging an item image, it renders behind the empty slots.

I don't want to use hierarchy order to organize the layers of these slots because moving items around is very dynamic and the hierarchy order of the slots changes seemingly randomly when I press play. Is there another way to ensure that the item image being dragged is "closer to the camera" or in front of the rest of the inventory? Thanks.

Answer 1

Decided to manipulate hierarchy order after all and it's working pretty well.

I added

for (int i = 0; i < numRows; i++)
{
    inventoryRows[i].transform.SetSiblingIndex(i);
}

to a slot manager script to remove the random ordering upon pressing play.

Then, in my DragHandler script, I added the following to OnBeginDrag()

slotStartingSiblingIndex = transform.parent.GetSiblingIndex();
rowStartingSiblingIndex = transform.parent.parent.GetSiblingIndex();
transform.parent.SetAsLastSibling();
transform.parent.parent.SetAsLastSibling();

and the following to OnEndDrag()

transform.parent.SetSiblingIndex(slotStartingSiblingIndex);
transform.parent.parent.SetSiblingIndex(rowStartingSiblingIndex);

This gives pretty good control of hierarchy order, and thus, of rendering layers.