UMG - Drag&Drop capturing mouse events.

I have just spend 2h trying to get simple mouse events working. Like change text over text block when mouse enter widget.

But so far without success.

I have Drag&Drop working with Slate in C++, and tried to get something working in UMG now.
So far it seems like my widget can’t simply capture mouse click.

Could anyway write, some steps, needed to get inpture capture working for UMG widget ?

You could try the Enable Input Node for the BluePrint. Connect that to Event Begin Play. Might work. Works for Meshs in the scene. Just a theory, might be way off.

Nevermind. It turned out that stacking UMG and slate in single viewport didn’t worked out so well. My Slate widgets were capturing all input before it make into UMG.

Hey iniside – were you able to get some drag & drop functionality with UMG? I would really appreciate a screenshot of a simple set up. I’ve been trying to set this up for a while with no results.


Looks like my quick start guide for drag drop didn’t survive the drafting stage of the release notes, guess they were already getting a bit hefty - that’s right the release notes were bigger :smiley:

NOTE: Drag/Drop bug, if you attempt to use it in a fullscreen game it’s going to kick you out. Currently it’s placing the content into a new temp window, on the list to be fixed. Other random stuff, if you attempt to make a button drag/droppable, you’re going to have a bad time. The button is going to capture the mouse on down and the drag will never occur. Also on the list of stuff to fix :slight_smile:

Step 1) On Draggable Widget: You will implement the on mouse down event and do something like this: This allows drag detection to be detected, and will maintain it as long as the Drag Key is pressed.

Step 2) On Draggable Widget: When the drag is detected (after movement has overcome the jitter damping in Slate), On Drag Detected will be fired, and you can implement it like this, by creating a DragDropOperation that has a UObject Payload, and some widget representing the dragged content. Here’s an example I made with a spell icon widget.

Step 3) On Droppable Widget, you’ll need to implement some logic that does something with the Payload and Operation. I made a simple example that doesn’t do anything fancy it just moves the payload, which happens to be the spell Widget that the drag occurred on, and it just re-parents it to a widget it controls.

Step 4)
Click on [Root] in both the Draggable and Droppable widget’s, change their visibility to Visible, instead of Self Hit Test Invisible. That way they actually receive these mouse and drop/drag events.

Thank you so much for this Nick. I was just starting on porting from my old system of drawing everything manually to using UMG. This should make my D&D systems so much easier to use.

Thanks a lot for that Nick :slight_smile:

I guess I’ll wait until the button issue is fixed!

I’m having some trouble getting the above to work. I have an Image inside of a scale box as my widget. In the Graph I right clicked “On Mouse Button Down” and implemented it like the image above. If I run it now there is no response from OnMouseButtonDown, so I bound it to the event on the Image “OnMouseButtonDown”. This causes this event to fire, however my OnDragDetected function gets no response here. Is there something I’m missing?

if you implement the OnMouseButtonDown and the OnDragDetected in your widget, then bind your OnMouseButtonDown for the image to the OnMouseButtonDown of your widget instead of creating a new binding for the image. it should work.

I forgot one very important thing!

Click on [Root] in both the Draggable and Droppable widget’s, change their visibility to Visible, instead of Self Hit Test Invisible.

Well I can definitely get the drag to show up but I’ve tried multiple different widgets to drop on and none seem to receive the payload I’m trying to hand to them.

Edit: Ignore my comment, it’s too early and I was casting to the wrong place.

@Nick, do you have much information or documentation on how “On Drag Over” works? Basically all I need to know is how to figure out the widget that is below the payload that I’m dragging.


The documentation that exists is what’s above, official doc that covers all the things takes time and this feature still has some rough edges as noted at the top. “On Drag Over” is what is called on the widget that the droppable content is hovering on top of.

Ahhhhh I figured it out! Or at least what is causing my problem… Now I just need to figure out the best way to go about this. Your reply got me on the right trail Nick, thinking about the Root got me thinking about parents. Anyways, the problem was I have an Item widget which I implemented the mouse down and drag and drop functions on. If I make one of these on its own everything works as expected. However, I didn’t think it was working because whenever I made one of the widgets I would immediately parent it into a Uniform Grid Panel (my inventory). It looks like now the over-ridden mousedown and ondrag functions don’t get called on my item when it’s a child. It’s calling the uniform grid’s mousedown / ondrag functions.

I’d like it to ignore the parent’s functions so that I can drag around the items that are contained within it using their mousedown / ondrag functions. Is this possible? If not, how could I get a reference to a specific item within a grid panel, based on if the mouse is over it? Thank you!

Hey Nick,

I figured it all out. I almost have a completely perfect drag and drop inventory system through UMG now. Your guidance has been really great. I couldn’t ask for more helpful devs.

Hakabane when you finish it, it would be very helpful if you could post a tutorial about it, unfortunately there is still very few resources about UMG. I posted a lot of questions regarding UMG on the AnswerHUB and most of them are still left unanswered :frowning: Regarding this topic, i was having some problems getting the item widget to get the OnMouseButtonDown event and after a few tries it appears that you can’t have Set Auto Size enabled or else it won’t detect your clicks. For now i just have to set a big value on the Set Size after i create the item widget to show everything, since i can’t use auto size and Set Size on Event construct doesn’t do anything.

So far i’ve been only to create the Default Drag Visual using the Image directly from my ItemWidget, if i set it to my widget or create a duplicate it will not show anything. The biggest problem so far with using the image is this:


It appears that it doesn’t do alpha and the picture is squared.

Any news about this that can help me out? Thanks :slight_smile:

I got most of this working, but when I combine drag and drop with a menu that toggles by a ‘pressed and released button’ I get into trouble.
I cannot seem to find a way to properly disable the input of my character to not interfere with the menu, if you can help me please post here or pm! tnx :slight_smile:

This was very helpful in building my own inventory, however I’ve found a wierd behaviour I can’t quite understand,

When I move my Item from Slot to Slot everything works fine, but if I leave the item in a slot it has been in before and then close out PIE the editor crashes with:


Unknown exception - code 00000001 (first/second chance not available)

Fatal error: [File:D:\BuildFarm\buildmachine_++depot+UE4-Releases+4.5\Engine\Source\Developer\MessageLog\Private\Model\MessageLogListingModel.cpp] [Line: 70]
Critical Error InputComponent //Game//Maps//UEDPIE_2_TutorialTown.TutorialTown:Persistent

KERNELBASE + 37901 bytes
UE4Editor_Core + 3174852 bytes
UE4Editor_Core + 1677215 bytes
UE4Editor_MessageLog + 241173 bytes
UE4Editor_MessageLog + 241423 bytes
UE4Editor_Core + 1077733 bytes
UE4Editor_UnrealEd + 4172422 bytes
UE4Editor_UnrealEd + 1898852 bytes
UE4Editor_UnrealEd + 6486374 bytes
UE4Editor!FEngineLoop::Tick() + 3524 bytes [d:\buildfarm\buildmachine_++depot+ue4-releases+4.5\engine\source\runtime\launch\private\launchengineloop.cpp:2129]
UE4Editor!GuardedMain() + 479 bytes [d:\buildfarm\buildmachine_++depot+ue4-releases+4.5\engine\source\runtime\launch\private\launch.cpp:133]
UE4Editor!GuardedMainWrapper() + 26 bytes [d:\buildfarm\buildmachine_++depot+ue4-releases+4.5\engine\source\runtime\launch\private\windows\launchwindows.cpp:125]
UE4Editor!WinMain() + 249 bytes [d:\buildfarm\buildmachine_++depot+ue4-releases+4.5\engine\source\runtime\launch\private\windows\launchwindows.cpp:201]
UE4Editor!__tmainCRTStartup() + 329 bytes [f:\dd\vctools\crt\crtw32\dllstuff\crtexe.c:618]