Currently I have a card (a small UI button) and play area (a large UI button). When I hover over the play area it highlights and triggers a “pointer enter” event as I want it to. However when I drag a card over the play area, the play area no longer highlights nor triggers the event (presumably because the card is now in the way).
So my question is: is there anyway to make the large button (underneath) still recognize events from my cursor while still keeping the small button rendered and accessible on top? I struggled to find good info on searches as they all related to changing the order of elements which isn’t exactly what I’m looking for here. Rather I would like to “pierce” the layers for the purpose of events, if that makes sense.
Not in the way you are using it. In order to make raycasts pass through an object, it must be marked as “non-interactable” through the use of a canvas group. In this case it would mean the item you are dragging wouldn’t be draggable.
Only possible solution I can think of is to do your own independent raycasting while dragging, or better yet, make the item non-interactable while dragging and alter it’s position manually during update until the mouse is released.
Hope this helps.
you might want to look at the Re-orderable list control in the UI Extensions project and see if it does anything special, as I believe it does do some checking of content behind the pointer while dragging.
I’ve experimented a lot and tried some of the approaches you mentioned. I liked your idea of turning off interactable and half expected that to solve everything but unfortunately changing the UI element to non-interactive doesn’t seem to do very much at all in my case other than permanently putting the “disabled” color on. It might be because I’m using some extras like IPointerHandler (the default OnClick is too restrictive for dragging since you have to pointer down and up), but dragging still worked even when turning off interactable, and importantly the raycasting was still blocked. Had the same problem when changing the entire canvas to non-interactable and putting the play area in another canvas.
The best solution I’ve found so far is to use a CanvasGroup component to turn off raycast blocking on the card. Annoyingly the play area doesn’t highlight when you drag a card over it this way, despite it still triggering a pointer enter event on said play area. If I manually move the card over the play area and hover over it with raycast blocking off, it highlights the play area. If I mouse down (or don’t) and then move into the play area, it highlights the play area. I cannot explain this phenomenon (if anyone happens to know why I would love to know as well)… So I need another work around for that but it should be simple case of scripting in a method for that event trigger since that still works even if default highlighting doesn’t.
Thank you again for your help - I didn’t know about CanvasGroups and they seem very handy.
If you’re implementing your own code to handle the click/drag using the interfaces, there is also a RaycastAll function which returns everything the raycast hits, not just the first thing. Can be a little tricky to work with since the returned list isn’t necessarily ordered.
Apologies I didn’t respond to this sooner. That’s very good to know and explains the behavior. I’ve got it working for now but if it becomes over-encumbering I’ll tinker with RaycastAll to see if that works better. Many thanks for the enlightenment!