Detecting when a drag & drop operation leaves widget AND mouse button released?

Development Programming & Scripting
1

Hello, I have a curious issue I can’t figure out how to solve. I’ve created an inventory system that uses the Drag and Drop functionality. I’m trying to create the function where if the player drags the item out of the grid and to the “world” that it removes the item. I have a MasterUI widget which encompasses the whole screen and the inventory grid is attached to a named Slot inside a canvas panel. I got the functionality to work when I set the Master UI to Visible because I could detect On Drop, but then I realized I was no longer able to click on my Characters. There On Click events were no longer firing because the UI was consuming the click even though the Inventory is hidden.

Is there a way to have the UI ignore the click if there’s nothing actually there? Like if there’s no widget there to use the click then it passes through or propogates to the Character’s in the world?

Pending that, I can use Drag Leave to detect when the inventory item leaves the grid but the way my functionlaity is built i don’t want to drop the item unless the player releases the mouse because they might drag it back in, for example. I don’t know how to tie the Drag Leave event to also detect if mouse is pressed or if that’s even possible.

Any suggestions would be welcome!

2

There On Click events were no longer
firing because the UI was consuming
the click even though the Inventory is
hidden.

This one is strange, hidden UI elements do not register clicks. Consider double checking the visibility settings, perhaps there’s a border with Opacity 0 that is set to Visible. In addition, you can run the Widget Reflector and see what is interrupting the click. Or perhaps you’ve switched to UI only mode at some point?

Is there a way to have the UI ignore
the click if there’s nothing actually
there? Like if there’s no widget there
to use the click then it passes
through or propogates to the
Character’s in the world?

You override onMouseDown or onMouseUp and pass Unhandled as return value for any user widget. This will tunnel to the next layer; for as long as there’s nothing else to intercept it, the Player Controller will get the call.

Pending that, I can use Drag Leave to
detect when the inventory item leaves
the grid but the way my functionlaity
is built i don’t want to drop the item
unless the player releases the mouse
because they might drag it back in,
for example. I don’t know how to tie
the Drag Leave event to also detect if
mouse is pressed or if that’s even
possible.

Not sure if I follow this one.

i don’t want to drop the item unless
the player releases the mouse because
they might drag it back in, for
example.

And you’re afraid that if they drop it back in the inventory, it would unnecessarily re-add it to the inventory? You want to detect mouse release or the actual drop call?

I don’t know how to tie the Drag Leave
event to also detect if mouse is
pressed or if that’s even possible.

Could you elaborate on how it’s supposed to work.

  • player starts dragging
  • drag can leave or re-enter the original container
  • button released at some point
  • drag operation checks what we’re dropping on, is there a widget at all
  • if it’s the desired container, handle the payload
  • if it’s an undesired container, don’t touch the payload, cancel drag, clean up maybe

Which step above is not working as intended? Or you’ve got a more complex scenario to deal with?

Generally speaking, when you drag, you create a drag operation that carries a payload - it can be a reference to a widget for re-parenting to a new container or a struct with item data, or whatever your heart desires if you make a custom operation.

Perhaps this is what you need, you can create a custom drag operation, it comes with some additional functionality.

3

Good workaround. Congrats. :slight_smile:

4

Hey Thanks for replying Everynone. I checked through the hierarchy and everything is set to Self Not Hit Testable. It goes UIMaster > Canvas Panel > Overlay > Named Slot.

The inventory widget doesn’t get attached to the named slot until the first time the user opens it, but even on load the characters aren’t clickable if UIMaster is set to visible.

I did create a work around when the Drag Leave gets fired on the grid, i change the UI Master to visible so it can register the on drop and then I change it back to Not Hit Testable if they reenter the grid or drop on UIMaster

To answer your questions for the sake of posterity:

Yes, player starts dragging, I set the original widget’s render opacity to 0.5.
When the player releases the button it drops the item wherever he’s holding it.

  • Over the original spot, nothing happens.
  • If they drag over other item, the two switch places. Releasing will confirm new spot in the grid.
  • over an equipment slot, equips item, removes original item from grid
  • and then if they drag it off the screen which only takes up about 40% of screen, it will drop item from inventory and spawn it to the world.

Everything is working, just I had to set the Parent widget to not hit testable to so my characters could be clicked, but then the On Drop functionality wouldn’t work. So like I said above i just changed it visible when I dragged the widget off the grid.