UI Inventory/Drag Item Problem

Everything is working in my inventory using the new UI as expected. However, when I click and drag an item to move to a different slot inside the inventory, the dragged item icon that is drawn at the mouse position is behind the slot UI images as well as behind the UI panel that is the inventory box itself. I tried moving things around on the hierarchy but it continues the problem. I tried moving the slot images and the inventory panel back away from the camera on the Z axis but problem still is there, and tried moving the dragged item icon forward towards the camera on the z axis and still persists. Any ideas, anyone?

The hierarchy in case i missed something is the inventory Panel and dragged item icon and slot images are all children of the Canvas, but the slot image is only instantiated as a prefab at runtime.

The UI draw order (who is on top of what) is determined by the order in the hierarchy (further down in the hierarchy is more on top in the view).
To solve your issue, when you start dragging your icon, do this


that way the icon will be drawn on top of everything else (relatively to its parent).
if you find out that the icon is still behind some elements: try to change its parent. (the top level parent will be the canvas itself)

Worth noting that setting the transform’s parent as last sibling is not practical sometimes, especially when your code depends on the order of items in your UI list (for example an inventory panel where you know the first child panel is the helmet, the second is armor, etc). That will mess up the order of both your items and the item slots themselves.

So what you can also do is create an empty gameobject in your canvas, and set that one to be the very last in the hierarchy. Then when you initiate dragging, save the current transform parent, set the parent to be this dummy parent, then set it back to the original parent upon ending the drag. See example script:

#region IBeginDragHandler implementation

	public void OnBeginDrag (PointerEventData eventData)
		startPos = transform.position;
		originalParent = transform.parent;
		transform.SetParent(parentForDragging, true);


	#region IDragHandler implementation

	public void OnDrag (PointerEventData eventData)
		transform.position = eventData.position;


	#region IEndDragHandler implementation

	public void OnEndDrag (PointerEventData eventData)
		transform.position = startPos;
		transform.SetParent(originalParent, true);