[Tutorial] UMG Movable Widget

This is a tutorial for people who want widgets that can move around the screen. This is a really easy set up that I actually found on the answerhub but altered slightly. I set this up using the third person template (4.7 preview) so you may need to alter how your mouse clicks work if you use a different project template. That being said, I won’t answer any questions on how to implement this in other templates.

  1. In your new project create a new widget that you want to move. In my case I created one called WidgetToMove
  2. Open the “MyCharacter” blueprint and create the following function to draw the new widget onto your hud and enable the mouse the ability to interact with it. (remember to check the boxes for each bool as I did not)
  3. Create some visual you want to drag around. To demonstrate how this works I used the following setup. Please note that you cannot directly drag buttons or text, though you can if they are wrapped in a border box.
  4. In the details of the panel of the border wrapping the text block, click on the bind event for “Mouse Button Down”*. While you’re here, click on the child border of the CanvasPanel and set it to “is variable” for step 8.
  5. In the graph, create a new Bool Variable called " Mouse Button Down" and then fill in the bind function you just made like this:
  6. Implement the two following functions from the variable panel on the left by dropping down the Mouse tree, right clicking OnMouseButtonUp and OnMouseMove and selecting “Implement Function” **
  7. Set up the OnMouseButtonUp as follows:
  8. Set up the OnMouseMove as follows***:
    • If you want to make any part of the widget able to be moved, instead of binding just the border around the text block to move, in step 6 implement the OnMouseButtonDown function there and fill it out the same.
      ** - You can enable the 3rd function here to make the whole widget movable.
      *** - If you subtract a value to both floats in the picture that are in the comment box, you can change where the cursor ends up when you first start dragging it. By default it will always auto position itself to the top left. I found that subtracting about half of your widgets X axis and a few down the Y axis works great for making drag able inventory windows.

The original post I followed can be found here: AnswerHub

Anyhow I’m off to bed so wont be answering any questions I’m off work tomorrow. Hopefully this can help some people out that may have needed it.

Thank you, this is extremely useful!

A big thanks for this gift Hakabane.

I’m always happy to help the community.

Did you manage to make this work in PIE as well? I’m having issues with DPI Scaling and unsure how to deal with it. I have posted the details of the issue in this thread:

https://forums.unrealengine.com/showthread.php?51577-UMG-Mouse-screen-position-problem&p=197832&viewfull=1#post197832

Also, my widget is created dynamically and not part of the HUD initially.

Thanks,

lol i did a similar howto on that =)

@ I actually only used it in pie, and it worked well. I also use dynamically spawned windows and it seems to work. I also only ever work in one resolution but if I get some time I will look into it. With the holidays I’ve been pretty busy since I work in retail. I hope your question gets answered in the other thread though.

@ - I really think you need to start taking time and actually explaining your “how to’s” rather than just giving download links. You also really should try commenting your code for people to follow along with since not everyone will just understand things from the get go. Seems you have an idea of what you do and I think it would help people more.

Hakabane is a god! :smiley:

Wow. Is it you who giving such advice? Lmao. To post 7 pictures doesn’t explain things. This tutorial is useless as most of the youtube ones. Why MouseX? What are input values in functions? And so on… If tutorial would have been correct - no question, just copypaste (and I’d rather use @ downloading instead of repeating mindless steps), but it’s not.

I’m sorry guys, just couldn’t pass by… We need to clean forum and answerhub. This is so annoying to find something now. There is so many wrong and shallow info already.

You could start with *not *necroing and bumping a thread that is more than 2 years old…

I’m chiming in here since what @Hakabane posted is actually very clear. Seems to me that you need more experience with the system. learn by trial and error that is i how Hakabane did it (I know this since i have known Hakabane for years ). If you actually tried to do what he did u will find out that its just as easy to do as anything else. This is a well put together tutorial for advanced users in blueprint. If u need someone to hold your hand while coding . then you wont learn how to code at all. unreal has a ton of tutorials and i think they even do some widget dragging in one of them. so i suggest starting there before u start a rant on someone who posted a simple how to for advanced users. Coding is something u learn really by looking at tutorials and then putting it to practice with trial an error. its how i learned 4 different coding languages.

I’m totally disagree with you. Tutorials in your submission gives you nothing except the just another algorithm. My point is to not blame such class of information in general, but to ask everyone to not make a mistakes and try to explain essentials instead giving a step-by-step only case walkthrough. Why do you want to hit the same walls as previous hundreds of coders did? This is kind of masohistic way of learning and especially finding the simple answers why some specific things don’t work.

Yeah, but this thread is still at the first page of search page. So people see it often.

You seem to misunderstand what it means to learn. And for starters you didnt ask anyone to explain what it says. u started a rant on why it was not explained. The way you want to learn will only result in difficulties down the road for you because everyone has a different way of coding something. So in the long run it will cause issues when you start trying to connect the dots and in turn will force you to learn by trial and error. Now if you instead took a look at the nodes that are in the picture and used google to see what they all do by using the api and allowing you to understand in a self taught manner. by the time you where done typing anything to complain about lack of instructions you would have had a movable widget. Also if instead of ranting had you asked for help in the matter on explaining how this all works so you could understand it better. i would have replied in a more friendly manner and explained it to you but now since your not even willing to take your time to even look things up and try to learn it im not going to. all in all dont put people down when they were nice enough to take time out of their day to post a tutorial on something. if it wasnt for them you wouldnt even have a general idea of how it worked. An old saying is “You catch more flies with honey than you do with vinegar.” and this is right on the money…

very good tutorial. but i still cant move the widget. because unfortunatelly there is a mistake in ictures, because 1 picture repeat and we have not the last picture
please can you upload it? thanks