[UMG] 4.6 Drag and Drop Help

Hello everyone,

I have a bit of an issue and need to ask for some help. I’ve been having this issue for a while as I’ve only worked with UMG for less than a week. I have a general HUD UMG widget, a hotbar UMG widget, and a widget with the image by itself. I want to drag and drop from the hotbar, create the image widget, onto the HUD widget and eventually drop it to the HUD widget and update. Well the issue is that when I drag it, it creates the image widget in the top left corner, I am assuming this is because it is created at 0, 0 (I’ll work on the drop later; I believe I know how to go about this but I haven’t attempted it yet as I want to fix this first). The drag event is located within the hotbar widget and I tried updated the created image widget in the hotbar widget with OnDragDetected event where I set position in viewport based off the pointer event and get screen space position for the created image widget, or, should my event be in a different widget or am I going about this wrong?

I have looked at the other posts that mention this or say drag and drop inventory such as this, UMG - Drag&Drop capturing mouse events. - Blueprint Visual Scripting - Unreal Engine Forums but I’m not making any progress on it. Is anyone able to explain what I should do so that the image widget is created at the mouse or is able to update to the mouse?

Thanks.

Bump. I’m still having some issues with where the dragged inventory widget is spawning.

Thanks.

Also, a different question. How can I get the widget that is under the mouse when OnDrop is fired for the dragged item? The bIsHovered variable is only set when OnDrag is started for the widget that is under the mouse. I tested it when I start my dragged widget and I saw that the index in the array for the images doesn’t change when I dropped it.

im having a similar problem,

i have an element i can drag, there are more than one widgets inside this element, but i only want to drag the image when i click the element.

However, this is working quite well, just the image is dragged but even if it follows the mouse it is not possible for me to relocate that dragged image to my mouse screen position.
Means, i dont know how to get the screen location vector of a widget all is returning 0,0 to me.

But since Drag and drop is still buggy, what i read in some posts on answerhub i assume i just have to wait a bit longer?

The OnDropped event on the dragged item only exists for you to fire off some general purpose stuff, it’s not meant for you to determine who you’re being dropped onto, like maybe it always removes the data from a data container before the drop handler deals with the data.
The idea is that the dragged content shouldn’t really worry about what widget it’s being dropped onto, it shouldn’t care. Instead you should implement a drop handler on some other widget that will be the drop target, and handle that OnDrop function, do whatever is needed there for the drag content. That way if you drop a spell onto the hot bar, or into the spell book, or into an inventory slot, the various drop targets all know how to handle a spell being dropped onto them, but the spell need not worry about what target it’s being dropped onto.

Thanks for the replies.

@anonymous_user_8d708650, its a little reassuring to know that I’m not the only one having issues. However, there must be a way to complete it and there could be just something that we are just missing as there are youtube videos and posts on here that demonstrate the correct behavior of drag and drop. If I do find out the issue, or the solution that I use to fix it, I will be sure to post it.

@NickDarnell, I’d like to clarify what you said so that I can know if I’m understanding you properly. You are stating that the widget that I want to drop this onto, let us say a from inventory widget to a hotbar widget, that the hotbar widget is the widget that wants to handle the OnDrop function correct? If so, that is where my OnDrop is located at, I just need to know what the mouse is over within the hotbar widget to drop the item onto the widget and the bIsHovered wasn’t working properly for me on the OnDrop. Is there another variable or event for Hovered or mouse position for on drop? Does that make sense or am I just making things more confusing and if so then I’ll post a screen shot of my OnDrop event.

Thanks.

Oh I see, don’t handle the OnDrop at the HotBar level, handle it at the HotBarItem widget level. So don’t try to figure out what sub rect/widget your mouse is over. You should instead make a specialized widget for the individual hot bar items, each socket would know how to handle its individual division of the hotbar.

So like for me, I have a spell Widget (Draggable), a Hot Bar Widget (Creates a list of Hot Bar Socket Widgets), Hot Bar Socket Widget (OnDrop).

The reason IsHovered doesn’t work is because of the flow of events, when a drag is occurring all other events are suspended, it’s the reason dragging doesn’t produce mouse enter/leave events. Because of this you can’t know if it’s hovered or not.

@NickDarnell, Oh okay so create a special hot bar socket widget within the hotbar that should be the one that handles the OnDrop. I will have to play around with it, but thank you for informing me on this. I’ll let you know if I have any other issues.

Thank you very much.

so i am still having the same problem.

I have a ScrollBoxItemWidget aka a Horizontal Box with Iteminformation, that represents one item. (f.e. Name, ItemImage, Damage, Worth, Condition) would be one ScrollBoxItem.

The Drag shall fire when i drag from the Horizontal Box, but the dragged Visual should be the ItemImage only.

I am still unable to place the dragged Image to the MousePosition. It is all working fine but the Image keeps his offset when i started the drag operation on the other edge of the BoxItem.

Any hints how to move the dragged image to the mouse position?

@anonymous_user_8d708650, I’m sorry I am still having the same issue as well. My drop operation is now working however and I’m continuing on for the time being with the offset between the two. If I get it figured out I’ll let you know.

@anonymous_user_8d708650, I think I figured it out. I created a specific widget for my hotbar icon socket and that is all that is in the widget, added the OnDragDetected, OnMouseButtonDown event. Now when I drag it spawns at the location of the mouse/widget

Ah cool,

makes sense. Will get that child widget out of the barwidget as Default drag visual

Will try that. Thanks

ok, having a custom widget inside the horizontalbar still wont translate it to the mouse position

hmmm

Hmm, mine are just in a CanvasPanel so I haven’t put them in a HorizontalBar. But if I try it later I’ll keep you posted.