Unity UI Force UI element to front independant of hierarchy order

So I'm working on an inventory system and just finished implementing a drag and drop feature. During the process though I encountered a visual bug where the item being dragged around in the inventory will appear behind inventory slots due to the way UI elements are sorted depending on their position in the hierarchy. So if I dragged an item that was in slot 15 around the inventory, it would appear as it should be in lower slots (14 or lower) but will appear behind any slots above it (16 or higher). I tried looking up solutions on how to fix this, the most common one being to try

transform.SetAsLastSibling

function, but that caused some problematic sorting issues when dragging items to and drop a slot. All the slots are created from a single prefab and created at runtime to allow for easy changeable slot numbers; it starts with the slot UI which is just a simple square for now, and the visual for an item in the inventory which just uses a UI image component is a child of the slot (this is the visual that gets dragged around). Is there anything I can do to fix this visual bug? Thanks.

 

Bump. Still not solved

 

What about https://docs.unity3d.com/ScriptReference/Canvas-overrideSorting.html ?

 

Not having any luck with this. I tried adding a Canvas component to various different elements so I can use the override sorting, but that causes any children of the object with the Canvas component to no longer work. So if I put the Canvas component on the empty that contains all the slots, I can no longer click on the slots or do anything with them. And if I try putting the Canvas component directly onto the slots, I can't click them or use the drag and drop feature I made. How is it this hard to change the sorting order???

 

Is the override sorting witz the right layer selected?

 

2022, solution that worked for me!

I had a similar need because of my game drag and drop items system, so I've ended adding a Canvas to the object when I start dragging it, and change it's order to be on top of the UI:

public void OnBeginDrag(PointerEventData eventData)
{
...
dragCanvas = objBeingDraged.AddComponent<Canvas>();
dragCanvas.overrideSorting = true;
dragCanvas.sortingOrder = 1;
}

Then, to avoid problems, destroy this canvas when the object is placed wherever you want:

public void OnEndDrag(PointerEventData eventData)
{
Destroy(dragCanvas);
...
}