Detect Drag and onClicked conflict

Hello!
I’m trying to implement Drag and Drop system in my Inventory, but i’ve encountered a problem - when i override OnPreviewMouseButton event and put “Detect Drag if pressed” node in there, event onClicked stops working - it works only with second click, if i press the button twice, like if Detect Drag consumes the first click.

I’ve tried to use “Precise click” in button settings, but it doesn’t help.

Here’s my widget with button:

325947-clip2net-201230212820.png

How can i make Detect Drag and onClicked work together?

I think this could be to do with the OnPreviewMouseButton overriding the On Clicked

326078-screenshot-1.png

I’m not sure you can directly fix this it might just be how the thing works, and i’m sure the standard OnMouseButtonDown doesn’t work with the drag system as it cant detect left click.

You could try handling your on clicked logic inside the OnPreviewMouseButton

Or

use a event dispatcher, call a function or call an event if you don’t want to handle your logic inside the OnPreviewMouseButton

Hello! Take a look at this OnMouseDown and button in UMG - Blueprint Visual Scripting - Unreal Engine Forums. It seems that even if you are using Precise Click you can have problems with button Visual States. Can it be suitable solution to just have some decorator around Button for drag and drop purpose?

Yes, adding a border indeed solved a problem, thanks!

Thanks, i moved all the logic from onClicked to OnPreviewMouseButton, and now double click is handled correctly!

I know I’m a few years behind here, but for any future folks, this is the system I made and it is working flawlessly, but it involves a few steps.

I basically made a custom drag detector.

First, in the widget with the button, I override ‘Preview Mouse Button Down’ but return it unhandled so it doesn’t consume the input.

Then I send that input to a custom event and create a variable.
Screenshot 2024-06-24 230204

After that, I assign the ‘On Released’ dispatcher for the button to another custom event and call a custom event dispatcher with a reference to the widget with the button.

Continuing, when I populate the parent widget with the widget that contains the button, I assign my custom event dispatcher to yet another custom event (except in the parent widget).

On that custom event, I then check if a drag was detected (below). If a drag is not detected, then the code for the button clicked fires.

In the parent widget, I override ‘On Mouse Button Up’, again unhandled. I untick the first boolean and execute the previous custom event. Same as if I released the button.

Finally, on a tick event (I’m sending to another custom event), I first check if a drag was detected. The first execution of this should always be false since I’m setting it to true only if it is false. On false, I make sure the mouse button is down with the boolean I made earlier and then I check to see if the mouse moved vertically (this can be either or both) and if that’s true, a drag was detected. Now, the next tick, the first branch will be true. Now I can use the same delta input to offset the scroll box (or you can get the mouse position and ‘hold’ whatever your dragging). I have no need for the ‘OnDrop’ function/override, however you could use the false output of the mouse release event to ‘Release’ the dragged object (you would need to use a button and execute ‘OnHovered’ and send the widget reference to the parent to get where you want to drop it).

Here is a demonstration of the code (I don’t have app functionality yet but it would work, as I tested with a print string):
ezgif-7-97fd659785