Search Unity

Question A workaround for Z-Order for dragging.

Discussion in 'UI Toolkit' started by OddOwlI, Jan 15, 2023.

  1. OddOwlI

    OddOwlI

    Joined:
    Jun 5, 2022
    Posts:
    9
    I have been prototypeing some stuff with UI Toolkit and so far i have been really liking it. However the lack of a z-index is stumping me.

    I have an inventory system on the right and the unit on the left (pretend its the green dot). I want to be able to drag stuff from the right to the left and place them in specific locations.


    The first example does not make any DOM changes and just moves the icon around. Its behavior leads me to believe that the order the elements are rendered provides there z-index value(or equivalent). Now what really surprised me is that when i move off the red area (which is a scroll element) to the left the blue icon is still not shown. The gray background is a Unity Sprite Renderer and not a part of the UI, same with the green dot. I would have expected the blue icon to show up since the elements on the left are transparent. I figured it would have shown since the elements "above" it where transparent.
    Dragging with no DOM Changes. (MP4)

    My First thought was to use BringToFront but that seems to just move the element to the last element of the parent which does bring it to the front but I don't want to actually move it. I like how there was a space remaining in the first test and then it snaps back to the original location. by doing this it moves it to the end. This also does not solve the issue of it not showing up outside the scroll element.
    Dragging calling BringToFront(). (MP4)

    This last attempt Moves the element your dragging to a parent element and changes the positioning to absolute. This seems to work perfectly for the dragging part but just like the second option, moves the element, so you don't get that blank space where it was and it does not snap back to where it was. I was actually having issues getting it back to the original element it was in, but i'm not concerned about that at the moment.
    Dragging Chaning Parent to higher level Element. (MP4)

    In a perfect world i would like how the inventory scroll element keeps that blank space and how the icon snaps back to where it was in the first example and how the dragging looks in the 3rd example.


    Thanks
    ~Chris