Best way to fix UI buttons going behind slot images when using OnDragEventHandlers?

Unity Engine
1

I know what the problem is but I’m having trouble figuring out what the best solution is, I’ve provided screenshots because it’s easier than having to describe it constantly. The UI button disappears behind my hotbar slots when I drag, everything else works fine but the visuals are pretty aggravating. This is definitely a parenting issue but because my code relies on an organised hierarchy to work I’d prefer it if I didn’t have to mess with that. I’m wondering if there’s some way I could get the sort order of the dragged button to change so it’s always on top of everything but I don’t know how to do that.

5822776--617002--Button Drag Issue 1.png
5822776--617002--Button Drag Issue 1.png1920×1017 129 KB
5822776--617005--Button Drag Issue 2.png
5822776--617005--Button Drag Issue 2.png1920×1010 126 KB

Here’s the code I’m using.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class BombDragAndDrop : MonoBehaviour, IDragHandler, IBeginDragHandler, IPointerDownHandler, IEndDragHandler

{
    public RectTransform rectTransform;
    public Canvas canvas;
    public Transform currentSlot;
    public HotBarSlot hotBarSlot;

    public GameObject aimEmpty;

    private void Awake()
   
    {
        rectTransform = GetComponent<RectTransform>();
        canvas = GetComponentInParent<Canvas>();
    }

    private void Start()

    {
        aimEmpty = GameObject.FindGameObjectWithTag("aimempty");
    }

    public void OnBeginDrag(PointerEventData eventData)

    {
        GetComponent<Image>().raycastTarget = false;
        GetComponentInParent<HotBarSlot>().isFull = false;
    }


    public void OnDrag(PointerEventData eventData)

    {
        transform.position = Input.mousePosition;
    }

    public void OnPointerDown(PointerEventData eventData)

    {
        aimEmpty.GetComponent<ShootArrow>().canFire = false;
    }

    public void OnEndDrag(PointerEventData eventData)

    {
        transform.position = GetComponentInParent<HotBarSlot>().transform.position;
        GetComponentInParent<HotBarSlot>().isFull = true;
        GetComponent<Image>().raycastTarget = true;
    }
}
2

I believe this would be the answer.

For UI objects (items in the UnityEngine.UI) hierarchy the way I would do it is to transiently add a Canvas object to the dragged button (top of all its parts if it is a collection of parts), and set the .overrideSorting property to true, then tweak the .sortingOrder so it is above all else.

When the button arrives, just Destroy the transient canvas.

1 Like
3

Ohhh! Thank you, that makes sense, I hadn’t considered that as a possibility, I’ll have a mess with that and see if it effects the dragging behaviour, should be fine though.

4

I was thinking about that… wondering if the adding of the Canvas might muck with the “grab/drag” messaging, but perhaps not… you’re the best one to find out!

If the above does not work, another way is to have a separate root UI object at the bottom of your scene (makes it sort above other UI) and temporarily reparent the button during drag, but that might also run afoul of some continuity in dragging…

5

It works perfectly to fix my problem but yes it is interfering with the drag mechanics after it’s dropped, that’s fine though because what I’ll do is I’ll have my slot delete the canvas component again when the button is dragged onto it or the the button is dragged into a null area. I’ll post updated code just to help people out if they’re getting annoyed with this as well.

6

I vaguely seem to recall that if you change your Canvas render mode to Screen Space - Camera, then it will start paying attention to the Z values of object positions, and so you can use those to make certain objects appear on top. So that might be yet another option.

7

Thanks! This works perfectly, all I did was make sure that the canvas was destroyed when OnDrop and OnDragEnd was called very pleasant to see my shiny new hotbar working now.

    public void OnDrop(PointerEventData eventData)

    {
        currentDraggedButton = eventData.pointerDrag.gameObject;

        if (isFull == true)

        {
            currentDraggedButton.transform.position = GetComponentInParent<HotBarSlot>().transform.position;
            currentDraggedButton.GetComponent<Image>().raycastTarget = true;
            currentDraggedButton.GetComponentInParent<HotBarSlot>().isFull = true;
            Canvas buttonCanvas = currentDraggedButton.GetComponent<Canvas>();
            Destroy(buttonCanvas);
        }

        if (isFull == false)

        {
            currentSlot = transform;
            currentSlot.GetComponent<HotBarSlot>().isFull = false;
            currentDraggedButton.transform.position = gameObject.transform.position;
            currentDraggedButton.transform.SetParent(transform);
            currentDraggedButton.GetComponent<Image>().raycastTarget = true;
            isFull = true;
            Canvas buttonCanvas = currentDraggedButton.GetComponent<Canvas>();
            Destroy(buttonCanvas);
        }
    }

    public void OnEndDrag(PointerEventData eventData)

    {
        transform.position = GetComponentInParent<HotBarSlot>().transform.position;
        GetComponentInParent<HotBarSlot>().isFull = true;
        GetComponent<Image>().raycastTarget = true;
        Canvas buttonCanvas = GetComponent<Canvas>();
        Destroy(buttonCanvas);
    }

I did originally try messing with the Z positioning but that hadn’t worked for me, this method seems to be working perfectly for me though so I’ll stick with that it also doesn’t affect the functionality of the code so that’s fine by me. Nothing worse than having to do an unnecessary hack job and screw up your project just to fix one problem lol.