How to make movable window widgets in UE5 with drag and drop

hello in this episode we're going to look at how to make draggable widgets in ue5 and we're going to use some of yui's documentation to help achieve this so there's some nice documentation from Unreal Engine uh for how to do this however we're going to extend it further by making a reusable component right we don't want to be recreating the same blueprints on every widget that we want to be um draggable so we're going to create a generic component that we're going to then add to our other widgets making them draggable as well so that's kind of the the purpose here so let's have a quick look at the demo and so just showcase what it is that we're trying to do so basically we're going to have a couple of windows so this will be the first one you can see if I'm clicking dragging and dropping it the window is moving with that and then I can have a different window and you can see I also got the same logic applied so the key here is to create this little widget component so that we don't have to repeat that same logic in other places right um so that's the demo and let's get it into the actual code on how to achieve this okay so perhaps one of the first things that we'll look at is creating the user widget for uh the top of the window so this is just a a little widget that we're going to be Nest nesting inside our other widgets and it will effectively make those other widgets drag and drop enabled right so we'll put in all of our logic in here and then we'll just add this widget into other ones and that's how we'll uh sort that out in terms of like the uh the designer here I'm gonna have a title so I'm going to bind this uh to a variable so I'm going to set this title from my other um components and I'm also going to have a button to make the widgets invisible as well so we'll have a look at those the key things that we need to implement are inside these functions for drag and drop and on Mouse button down so perhaps we'll get started with those so uh maybe with the mouse button down first and by the way in order to create this function what you have to do is click on this override button here and just find it so you can actually type here so on Mouse button down for instance you're not going to see it here right now this is because I've already uh created the override but if you haven't done it it will be available here and just do the same thing for the on drag detective so that's how you go ahead and create these functions that we can then implement this functionality to and what does this function actually try and do well the first thing that it does is um try and evaluate the drag offset so this was a little confusing for me to understand at the beginning but basically what it tries to capture is where is your mouse in reference to this widget when you click the button so for example if I click it right here it provides me the x and y coordinate of where I clicked from so this is quite important because when we're actually dropping the widget we need to provide it that offset so what we'll actually do is drop the the widget at the point of your mouse so it will reposition it here and then we just need to add the X and Y coordinates for the offset so that's what it's actually trying to do um I mean it was useful for me to understand that because I didn't really understand that from um reading the Unreal Engine docs um so that's evaluating the drag offset and then what we also want to do is initiate the detection of drag so you'll have to basically grab the mouse event and tell it to detect drag if pressed so that's it for the on Mouse button down so let's go inside the on drag detector to see what that does so the undrag detected function will get called once and it will get called of the instance of drag being detected from you know the point where you've started looking for it so it's not going to be continuously executing this function it'll only get pulled once and it will do two primary things so the first one is um this one over here we're going to be creating this widget drag which is actually um essentially this drag and drop operation so we're going to have a look at it very shortly and this will actually deal with most of this drag and drop functionality we're just really extending upon it it allows you to specify the default drag visual so this is what you see when you're dragging your mouse and that's this one over here so this is the drag widget so let's have a look at both of those as we're proceeding so let's have a look at how to create this widget drag component so in order to create a select um create new blueprint so here we want to look for drag drop operation so select that for the parent class um I'd call it something else because for me it was quite confusing between this drag widget and widget drag it's not great names do change it I would advise you so you can confirm here the parent pass is drag drop operation and this is quite key because we're actually going to be reusing most functionality from the parent class I've created these two variables pretty much as per the UE documentation there's actually a payload parameter as well available in the parent class which you can leverage so you don't actually have to create these variables you can see I've created them and made them instance editable and exposed on spawn so that's how we populate them and then they become accessible later on as well so this is essentially a payload for us and I'll just show you you do have another field for the payload as well so you could leverage that but this could be a bit more explicit you can see what it is and how to use it so that's one advantage of having them as separate variables I just want to highlight as well that it might be worth playing around with the default drag visual so you can see we've connected it to this component so let's see what that looks like uh again so basically when I drag it we can see this grayed out box so you can see that the size of this box matches the parent widget so that's what we've just created now but you can make the drag visual something else so for instance you could even connect it to the parent widget and let's see what happens when you do that this will simply match uh the visual of your parent it's almost great but we don't actually want to have the previous instance visible the trouble here is that if you do try and make it invisible the default drag will also be invisible so there needs to be a way of creating a new instance which is just copying the appearance of the previous um window make that invisible and then the default drag will use a new instance that matches the appearance of the old one so um I haven't done that yet I'm going to have a look at this sometime in the future but for now um I'm just going to use this as a template so basically play around with the maker as you like and that's how you will modify the drag visual anyway so as you just saw we got to the point where we're able to drag a widget and we can move it around and now what we need to do is create some functionality that detects the on drop operation so we want to listen to an event for this drag drop operation being dropped somewhere else right and we're going to be handling that inside another widget so I've just called it player canvas widget and this is effectively like the part of the heads-up display for the character so I've just included some of the widgets um this will expand later on that I want the player to essentially see and interact with so this represents their entire screen so I just want to be able to drag this widget anywhere inside the screen and drop it so this is a good place for me to handle the on drop operation okay so let's have a look at how we do that so again you can see that inside this widget we override the on drop operation so will be able to find it by typing on drop here click that and it will create you this function over here so um one thing to bear in mind is that there's a there's potentially different types of drag drop operations so the one that we've created is called widget drag so that's where you can see that I'm casting this operation to the widget drag so if you were to have multiple different instances of drag drop operations and it will be useful right because you could be dropping an item to the world space right and this is a different type of drag drop operation so this is where it will be useful for you to cast and if it's failed casting then that's not your primary operation here right so this is quite important and so when when you've cast it you're able to get the two variables that we've created so we created widget reference and drag offset so that's how you get access to those variables and we'll do a bunch of other operations here so let's have a look at those but first let's make sure we understand the purpose of this function so uh the main focus of it is to actually update the position of the parent widget so what's happening is that you're clicking on your widget you're moving your mouse you're dragging it and then at the point that you let go what you want to do is then update the position of that widget to be where you've dropped your mouse essentially right where where you let go of your mouse so um this function over here basically achieves that set position and viewport and you can see that we're updating the parent widget which is the widget reference to be in this new position here right um it does a couple of other things like setting the visibility so part of our Drive operation we're making our parent widget invisible so this one basically makes sure that it's now visible again and then part of the Unreal Engine dots it asks you to remove from parent and add to viewport at least at the time of making the video I'm not actually essential I'm not sure why I requests you to do that but I can show you that if you don't do that it's not going to work properly so let's have a look so I have my widget and I now drop it in new places and it doesn't actually do anything so I'm not entirely sure why that is required here um but yeah without these two it doesn't actually work so do check that out like if you follow it obviously you can see it's working um but I'm not sure why uh we can't just simply set the position without uh removing it from uh parents so um okay so now let's have a look at how we actually set the positional to what um and we do that via the pointer event and the geometry so the pointer event is essentially like the the mouse event so we're getting the screen space position of the mouse and from my geometry we will convert this absolute to local providing the coordinates and that's going to be essentially the return value in terms of my geometry it's essentially the geometry of this entire widget so effectively we have this canvas panel and it's set be the full screen so that's kind of how it's uh linked together and then from our widget drag operation we've saved our drag offset earlier so we're going to be doing a subtraction here um to get the final position to update so that's our on drop operation so the last thing I wanted to do is uh just show you how to add this widget inside your other ones so for instance I'm using it inside my inventory so I have an inventory widget which is over here and what I what I've done essentially is just added it um inside to the top right like you can add it as you like but basically you should be able to find the movable title bar so you can call it whatever you like and then just simply drag and drop it into your widget and then style it as you like um the only other thing I needed to do is make sure that I set the parent widget for the movable title bar so that's how uh that component so this movable title bar that's how you populate this variable for the parent widget which is used throughout right so just make sure that you've added that but aside from that I didn't actually need to add anything else so you can see now this inventory component is drag and drop enabled and it doesn't need to have any particular custom blueprints created here it's simply reusing everything from this component and this achieves that refactoring that I mentioned earlier so I don't need to duplicate that code so again I'll just finish off with a quick demo um in case you've missed it earlier so you can see that I'm dragging and dropping over here and all of the steps can be found on this blog post so yeah best of luck and see you next time thanks

Channel: Unreal game dev with Yaz

Views: 2,032

Keywords: ue5, unreal engine, widgets, drag and drop, movable window

Id: XIS7O5p6W0s

Length: 13min 33sec (813 seconds)

Published: Tue Aug 22 2023