Simple Drag Drop (Unity Tutorial for Beginners)

in this video we're going to learn how to do a very simple drag and drop in unity we're going to cover all the interfaces to interact with our UI element let's begin hello and welcome I'm your code monkey and this channel is all about helping you learn how to make your own games with nf2 torrents made by a professional indie game developer so if you find the video helpful consider subscribing okay so over here I have this item and in here a inventory slot now in this video we're going to explore all of the interfaces and events related to dragging and dropping so here in the console window you can see the events so you can see that when I press the mouse there you go there's one event for on mouse press down then as I start dragging there you go I have the own begin drag event and as I let go I have the on end drag vent whilst the item is being dragged as you can see it forms the mouse position and when I let go it drops and stays in that position and over here I have the atom slot which is using the drop event and you can see that if I take my atom and I drop it right on the atom side there you go it gets snapped into position and the object also turns invisible once it is moving so this whole system is extremely simple and it works great alright so this is everything we want to cover let's get to it okay so here's my starting scene over here in the hierarchy I have my UI with my canvas inside I have a item slot game object and a item game object the only thing they have is an image okay let's begin by making our script to handle it so let's create a new C sharp script let's call this drag drop now we're going to apply it to the item game object so just drag it in there okay now in here and let's check out how we can capture various events now the way we do that is by implementing certain interfaces in our script so let's start with the simplest one which is the eye pointer down which is inside using unity engine dot event systems inside there we have the eye pointer down handler so we have this function which will be called when the mouse is pressed whilst on top of this object so I mean here and let's just do a simple debug log to test okay very simple let's see okay so here we are let's press with the mouse on top of our item click and there you go we have our nice event and if I click outside yep there is no message so that's how you implement a very basic Mouse down event now here in the editor you can see that when you create a canvas it automatically creates a event system this is the actual script that handles events and passes them on to whatever scripts implement the interfaces so if you have issues with events make sure you have the event system in your scene all right so back in our script we have the mouse down handler working correctly now let's look at the drag events so we have the I begin drag handler and then the I and drag handle now as the name implies this one gets called when we begin dragging and this one when we stop dragging so let's add some locks to see okay let's test okay here we are in our scene now if I press yep we have the on pointer down event however we are not triggering the begin drag the reason for that is very simple in here in order for these two to be fired we also need to implement another interface which is the I drag handler so this is the one that gets called on every frame whilst we are dragging this object so in here let's put okay so now like this we should be able to test all three of these let's see okay here we are first click there you go and pointer down now as I move the mouse there yo we trigger the begin drag and now it's triggering the on drag every frame that the mouse moves and when I let go there you go we have the on end Ragavendra so we can press drag and drop now let's look at how we can move our object whilst driving so here the on drag function gets called on every frame once the object is being dragged and the mouse has moved so we can use this to apply movement to our object and the way we do it is by moving this rect transform so let's make a paranoid awake just to grab our right from reference okay we have our right transform and now in here on the drag we can modify the anchored position and we can increase it and we go into the event data and we can grab the dump this field contains the movement Delta which is the amount that the mouse moved since the previous frame so by adding this we won't be moving our object on alongside the mouse okay that should do it let's test so here we are let's press down now move the mouse and there we go as you can see I am indeed dragging and now let's go undergo the atom stop so I can drag drop and there we go very nice so this is great but you can already see an issue the issue is that it's not following the mouse perfectly so as I click right here on the white part and as I move away there you can see the sprite is moving further than the actual mouse the reason for this is due to the difference between the mouse movement and the canvas scale here in the editor if we inspect the canvas you can see that the scale is not at one it's a 1.27 so this is why our movement is being incorrect the screen position is moving on ratio of 1 but the scale is 1.27 so the actual object moves 27% further than the actual mouse this is due to how the canvas is make sure that it scales everything in order to always fit on every screen so we need to use this value in order to get the correct movement so let's go into our script and in here let's add a field for our canvas ok here is the film for our canvas now let's go to the editor there's our item with our reference or canvas and just write a reference ok so now that we have this reference we can simply go in here we increase by the event a delta except we divided by the canvas dot scale factor all right just like that it should be working let's see ok here we're on let's press and move and there you go the object is now perfectly following the mouse position all right there it is just like that so we're right at the corner move it in there and yep still exactly where I grabbed it I can let go and it stopped is only there right awesome now one of the main things that you probably want to do with drag-and-drop is actually drop it into a specific position like for example and drop this item onto this item slot so let's do that in our script the interface that we need to implement is the eye drop handler so it implements the on drop function this one gets called when a Dragonball object is dropped in here so we actually don't want to implement this in here on the atom but rather on the item slot so let's make a new script in here make a new script call it the item slot and let's drag it onto the atom slot game object okay and I mean here we do what we were doing so we implement I drop handler just like that in here legislativo got one okay so let's test and see if this function is being called okay here's our console now we click we drag there we go we have the entree there you go let go and nope we only have the on drag event so we do not have the on drop so go drop it no dropp no drop no drop so something is wrong here now the answer is because the item itself is the one that is capturing the event instead of the slot so if we want to drag and drop we should disable the draggable item from capturing events so here in the editor and let's go into our item and here let's add a new component of type canvas group as you can see we have the various things we can change like the Alpha for example making it slightly transparent and more importantly we can define if this object should be interactable or not so this is what we're going to use let's go into the code and here let's grab our canvas group okay we have our canvas group so here when we begin drag we go into our canvas group and we set the blocks raycast into false so that the raycast goes through this object and lens on the items on so set that one to false and when we finish dragging we set it back to true and also just for fun let's make it slightly transparent once it's being drive so we certainly modify the Alpha let's put that point six and when we finish we reset back to one all right that should do it let's test okay so here we are let's click and drag and there you go as I drag it's already becoming invisible and as I'm let go it goes back into normal just like that now here is my console let's see I click there yo pointer down I drag begin drag now I go into the arm slot and I drop it and there you go we have the unrep Dani on n drag event alright so we have all of our events working awesome now let's go into the slot script in here when we capture this event we can also get the object that was dropped that one is inside event data dot pointer drag this is the game object that is currently being dragged so we do a similar test if this one is not known then let's take it get the component of time correct transform and set the anchor position to this anchored position alright so there it is just like that we should be able to see our items snap into position when we drop it near the item slot let's test ok here we are let's drag the item yep we can drag and we can let it go okay now let's drag and try to drop it right at the corner and see if it snaps right into position drop and there you go it's now perfectly into position so I move it and if I let go once on top of the item slot it snaps into the correct position and if I take it out then works is out the same as previously go drop go out right awesome so just like this we have some very simple logic working for our drag and drop so now you can take this simple logic and apply it to the inventory system built in a previous video in doing so you'll end up with a visual inventory system that you can drag and drop items onto as always you can download the project files in utilities from in ticker Montcalm subscribe to the channel for more unity tutorials post any questions you have in the comments and I'll see you next time [Music]

Channel: Code Monkey

Views: 313,520

Keywords: unity ui drag and drop tutorial, unity drag and drop 2d, unity drag drop inventory, unity drag and drop, unity drag drop ui, unity drag drop, unity drag, code monkey, brackeys, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity, game design, game development, game dev, game development unity, unity 2d, unity 3d tutorial, programming, coding, c#, code, software development, learn to code, learn programming, gamedev

Id: BGr-7GZJNXg

Length: 10min 31sec (631 seconds)

Published: Fri Nov 15 2019