HOW TO DRAG AND DROP WIDGET | Unreal Engine Tutorial

to make a drag and drop legit first thing we gotta do is right click go user interface widget blueprint user widget and call this BP draggable widget and then duplicate it and then call this one VP health bar it could be anything you want to move around it could be a number anything hit enter duplicate it once again and call this BP but alright so the next step is we want to right click in the content browser and create a new blueprint Class come down here to all classes and search for drag operation I thought it was called drag and drop operation but it's just drag drop select it press select and then name this BP underscore widget drag the names will kind of get confusing because we have widget drag and draggable widget so as long as you sort of keep the names the same for now you should be able to keep up with them all right so our next step is to go ahead and open up the BP widget drive and then over here in the list we are going to create a new variable and just call this BP widget ref ER and then instead of a Boolean we want to search for user widget and make it an object next we want to come over here and make it instance edible editable and then expose on spawn so now we want to come back over here create another variable called drag off set like that and then this will be a vector 2D right here Vector 2D and same thing again make it instance edible and expose and spawn so these two values the widget reference is going to be the widget that we want to drag and then the drag offset will hold the positions where we drag it to and from essentially alright so now just make sure you compile and Save you can go ahead and hit file save all as well since we created some other stuff so now we can head back and open up our draggable widget and then go over to the graph and over here on the left we want to create a variable once again and same thing call this widget ref and then change its type to widget all right so once you have it set to user widget object reference then once again you want to make it instance edit editable and expose on spawn now we can compile and save this as well all right so moving on to the next step we can close these two windows and go ahead and open up our BP health bar and in here up here in the search palette search for size box and drag that right onto the health bar right there and then for this tutorial what I'm going to drag around is just a simple progress bar there's not going to be any code on it for health values or anything like that it's just going to be a health bar for reference all right so inside the size box we want to set these overrides so that we can make this a little bit smaller so go ahead and enable width override and height override you want to get a value that's somewhat rectangular so something like 400 by 50. should do the trick right so if you would like rename your progress bar I'm going to rename mine to movable bar just a easy name to see and then we can head on over to the event graph and over here we want to create some function overrides so click the override right here and a list of functions should pop up you want to search for on Mouse button down which is right here and then you want to click again and do on drag detected which is right here all right we are going to start an on Mouse button down so go and go back to that all right so now we need to convert the health bar value to local space so that the mouse and the widget location can talk away another and figure out whenever you are clicking to drag it and where you want to drag it to so off of my geometry drag off of this and search for absolute to local there's a node specifically designed for this and then on the mouse event this is basically our Mouse so drawing off of this and do it screen space position and then plug it up right here and now we can promote this value to a variable so we can use it elsewhere and I am going to name this then drag offset like we hand in the other and now drag your return node out of the way because we're going to need a little bit of space and right click and search for attack drag if pressed and then hook this execute up right here and then for the pointer event that's going to be our mouse event so hook that up and then for the drag key it could be whatever you want but for the tutorial I'm going to do left Mouse button and then we can drag our return node back and connect all this up so now this basically detects if our Mouse where our Mouse wants to drag and it detects or what key wants to drag and it detects where our Mouse is so then we can compile and save this and move on to the next step so for this next step we want to go to on drag detected right over here and move your return node out of the way once again because we're going to need some space we are going to right click and add a create widget node like this and over here we are going to search for drag double widget right here and from here we are going to connect our line our execute pin up and you notice we got a new value set down here this is exactly what we need so what we're going to do is get a reference to this health bar so right click and search for this and it should be get a reference to self and plug that and then once again promote this to a variable so we can use it later and call this dragged widget because this is the widget that we pick up all right so now that we have the widget we want to drag we want to come over here and right click and say create drag and drop operation right here for the class we want our BP widget drag and then the next thing we want to change is down here on the pivot we want to instead of it being Center Center we want this to be Mouse down essentially what the pivot does is it determines where the drag widget will appear so if the pivot is on the mouse down then it will be centered around the mouse essentially all right so now that we have all that set up we can begin hooking everything up the execute goes on the execute the widget reference is self the drag offset is obviously our drag off set so drag it out and do get and plug that in and then [Music] default drag visual is the dragged widget we created and so now you can grab your return node drag it over here connect to execute and connect the operation so basically we created what the drag visual should be and where we should start dragging essentially the offset of it so now we can compile and save this blueprint all right so now we have on drag detected and on Mouse button down now we need to set up on Mouse button release so to do this minimize all of this and then open up the BP HUD and over here in the search palette search for canvas panel drag this in and we have to change some settings on this canvas pin so select it and come over here and this visibility is what we need to change the visibility instead of not hit testable do visible so essentially we do the drag the pickup detection in our health bar but since we create a new widget whenever we drag then whenever we release then our Mouse will be in the main Hood so we have to make it visible so that the mouse can detect the Hut essentially so next over here on the search clear that out go down here user created and there should be ours that we created right here and go ahead and drag out a BP health bar as you can see it's already the signs that we wanted it at earlier it's like a rectangular shape all right so now that we have everything set up properly we have our health bar in the HUD we can head on over to the graph and we can overwrite another function and this function will be on drop so it's right here all right so as usual disconnect that drag it up and now off of this operation we need to do cast to BP widget drag there and after this we need to pull off two things we need to get the drag offset and we need to get it widget ref ER and essentially what this does is we don't want this function running anytime we let go of the mouse on the hood so this detects if the widget drag operation is currently happening essentially and so once again we gotta convert the the coordinate spaces so make a little bit of room and off of my geometry do absolute to local and on Corner event to get screen space position and then drag this into that and it's the same thing we just did earlier but now that we have this value here we can subtract this by the drag offset and this will give us the position of where our Mouse or where the new widget should be dropped at drag off of your return value down here do subtract and make sure the bottom value is on top and this Top Value is on bottom next drag off of BP widget ref and go read remove wrong parent connect this up and this next sequence is kind of long so I will explain it once it's done after I get all the nodes out and hooked up so we remove from parent and then drag off again and say add to viewport right here drag this up connect that and then drag off once again and do set position in viewport connect this up to the executable and then the position is the subtraction we did just a minute ago and then this Boolean right here we need to disable that and then over here on the return node drag this connect data and enable that basically we don't need to remove DPI scaling because we're essentially already doing that and so yeah the on drop just re returns true as well and essentially what this does is we first remove the existing health bar and then we add the new one relative to our drag offset so we end the new one and then we set the position relative to the drag offset so next up make sure you compile and save all and we can head on to the next step all right so we are we are wrapped up with this for now so we can minimize this and over here we can open up draggable widget and in here we need to once again search for a size but drag that on there but this time we also need a border as well and drag that into the size box this size box its name is short and important so rename this to widget size and as well we need to set this variable to true and we will also be overriding its Dimensions so check width override and height overwrite so now go to your border over here and drop down brush color set it to black I personally like black better and set the alpha to point five and essentially this will be our shadow of the drag and drop all right so now over here in the event graph we can remove all of nope we can't remove that actually we can't remove pre-constructor tick but on event construct we need to drag off of this and do plants to BP health bar and then this will be our widget reference so drag it out into git connect this up to the object and then off of the return right here to get desired size and then you can right click and split strike pin and this is where that variable we created over there the Box the sensible box and we can drag it in here and we can set height override which is what we enabled and we can do set with override and then connect all these up like that whoops missed it and then for the Y drag it into the height and for the X drag it into width so now you can compile and save this and now lastly we can minimize this and then go to our character blueprint and now we want to display all the stuff we created so right click and do event begin play which is already up here and for the sake of this tutorial I'm going to do it off of begin play but if you want to see a more efficient way on how to set up a hood I did a tutorial on that the other day and I will leave a link to that in the description below if you already have some stuff when you begin play it doesn't really matter you can drag off the last thing on there and do create widget and then this class will be our BP hub and then we can do add to viewport and then for the sake of the tutorial to move the mouse around and you right click and do get player controller and then drag off of this and do set show mouse cursor ideally whenever you pull up the widget like say this is like say you have a button to customize the UI yourself you could set that up but as of right now the project will just automatically show the mouse cursor oh and make sure you check this box true and so now we can compile and hit file save all minimize this all right so now we can test out our project so click play and as you can see our bar is over here if we click a little Shadow appears and we can drop it down right over here we click again we can drop it down right here as you can see it stays there we can drop drying drop it right there and see what I mean by the mouse is just constantly on the screen say you have a settings menu that lets you customize UI that's what this is really used for but I'm not going to go that in depth for a tutorial video so yeah well if you found the video useful subscribing for more tutorials leave a like comment your thoughts and I will see you in the next one bye

Channel: The Average Dev

Views: 5,821

Keywords: unreal engine, ue4, ue5, how to drag and drop in unreal engine, ue5 how to drag a widget, ue5 tutorial, how to drag and drop widgets in unreal engine, how to drag and drop a widget, ue5 how to drag and drop a widget tutorial, how to move a widget in ue5, unreal engine how to move a widget around, unreal engine widget tutorial, moving ui in unreal engine, how to move ui elements in unreal engine, ue5 move widgets, how to move ue5 widget, how to move unreal engine widget, ue5 widget

Id: W2HAW-gwg8w

Length: 19min 25sec (1165 seconds)

Published: Sat Aug 12 2023