Drag and drop in Unity UI - create your own inventory UI!

[@Luluskuy]

Just from the first few second I watch your video, I already know your tutorial was extraordinary. Then I got to 04:50 mark. I was wrong, it was more than that! This is the type of tutorial that everyone hoped to see when they need one.

[@CocoCode]

Thank you! I spend a few hours on those animations ;)

[@bertiedev6478]

For anyone that wants the items to swap slots when dropping on a full slot here is how. public void OnDrop(PointerEventData eventData) { if(transform.childCount == 0) { GameObject dropped = eventData.pointerDrag; DraggableItem draggableItem = dropped.GetComponent(); draggableItem.parentAfterDrag = transform; } else { GameObject dropped = eventData.pointerDrag; DraggableItem draggableItem = dropped.GetComponent(); GameObject current = transform.GetChild(0).gameObject; DraggableItem currentDraggable = current.GetComponent(); currentDraggable.transform.SetParent(draggableItem.parentAfterDrag); draggableItem.parentAfterDrag = transform; } }

[@Hashishin13]

Very helpful I hope it gets pinned.

[@Fr33zE_YT]

Thank you so much!!!

[@n0v3g4plays3]

Very nice! I cleaned it up a bit, this does the exact same: public void OnDrop(PointerEventData eventData) { GameObject dropped = eventData.pointerDrag; DraggableItem draggableItem = dropped.GetComponent(); if(transform.childCount != 0) { GameObject current = transform.GetChild(0).gameObject; DraggableItem currentDraggable = current.GetComponent(); currentDraggable.transform.SetParent(draggableItem.parentAfterDrag); } draggableItem.parentAfterDrag = transform; }

[@Santanu_Pal]

Your teaching process is so clear and simple and very logical fold by fold. Appreciate your hard work. Looking for more videos for you.

[@piotrszymanski8325]

M8, you are one of the best! Everything showed, everything explained, nice clean and neat, without speeding and uselest trash talking, keep on going! Fingers crossed for your success!

[@CocoCode]

Thank you very much! Dzięki! 🎉

[@robertmcgraw2393]

THANK YOU SO MUCH!! I am self-taught and I've been working with Unity and C# part time for the past couple of years! The inventory system is something that I have not found a decent tutorial on that didn't feel like a big pile of spaghetti!! You are SO clear and precise with your explanation of the "drag and drop" portion (which had always given me the most headaches)! I am definitely going now to watch your full inventory tutorial! I appreciate you SO SO much for helping me get over this massive hurdle!!!

[@DwarvenStudios]

Thank you so much, I was watching the full inventory tutorial but the dragging didnt seem to work, watched this tutorial and now everything works PERFECTLY. On a side note, if anyone wants have more GO's like buttons under their items, dont add the grid layout group and just add an transform.position = parentAfterDrag.position at the BEGGINING of the onEndDrag method. If you add it in the end it will just offset your item which you do not want.

[@Aggroknight62]

DUDE YOU'RE AMAZING. That somehow has my object snapping back to it's original place, where the whole Grid Layout wasn't doing anything. You're a legend!

[@DwarvenStudios]

@@Aggroknight62 Glad I helped you! Funnily enough, I will have to re implement this later in Godot and then in UE5 (our current new main engine). I dont even know what I wrote now as after a big break of working, though I do recall this issue in some slight manner.

[@meenuchan7946]

Thank you so much for this awesome tutorial. In my game, I had text as a child for my draggable item. I wondered whether raycast target will work or not. But it worked well.

[@tahahamifar]

this video is absoulte Magic! better than any other tutorial about Drag & Drop system in youtube.

[@tower1990]

The cleanest explanation on KZbin. Thank you so much sensei! My stupid brain still don’t understand fully why the ray cast matters. As OnDrop should be triggered when a draggable item is released and dropped onto it. It should detect whatever object that’s colliding with it, and not the position under our mouse pointer. Strange. Hopefully someone from the community could kindly explain the logic behind. Thank you!

[@lagrangepoint9386]

My guy, you have criminally few subscribers for such amazing content.

[@jagdpanda]

if you're struggling to get this to work on a screen space - camera canvas, try getting the hit.point of a raycast screenpointtoray in the ondrag event to put the item at

[@StealthyShiroeanGames]

Thanks for this tutorial! I had no idea that Unity had these interfaces built-in. It's pretty cool how relatively easy it is to make a drag & drop system like this!

[@brandonmitchell-kiss2533]

This is one of the best tutorials I've ever seen for unity! Great teaching skills here!

[@wyrda2452]

This was a beautiful Unity UI tutorial series. Hoping to see more!

[@steved.1091]

You earned yourself a new subscriber. I've been following your content for some time, and it seems to me that you're quite knowledgeable in Unity's UI side of things. Keep up the good work 👍👍👍

[@emreucmaz3956]

Great explenation. Thank you so much!

[@vitriolicAmaranth]

Can't you just change layer order to solve the "sliding under slot" problem (by adding a canvas component to the object to gain control over the layer sorting)? Which is not to diminish the value of this video with a nitpick. Much more clear and educational than most tutorials. I've been devouring courses about making inventories, including paid ones, because it's the first thing I've encountered that has given me trouble and felt especially complex for what seems like a simple feature, and this is one of the best videos I've seen on the subject.

[@jumpkut]

you could, but that's not really the problem. the problem is that the slot now contains two items. You don't want that. So either have it be illegal to drop another item, like in the video, or have the items swap places.

[@CocoCode]

Thank you for the detailed comment! Please keep in mind that sometimes I need to take shortcuts or simplify things to make tutorials more accessible for beginners. That being said, I am strongly against adding a classic Unity layer sorting. I really like the Unity UI approach to sort order based on hierarchy (like in Photoshop). Also this approach (of changing parent on the start of the drag) doesn’t sound bad to me - technically when you start dragging item it’s not part of this slot anymore.

[@lpa9189]

Good point. However, you can't move a canvas directly. You'll need to parent the movable object by an object with a canvas. You can then modify the sorting layer of the parent canvas.

[@vitriolicAmaranth]

@@CocoCode Yeah, when I had time later I tried my solution and it didn't work perfectly in all use cases anyway. Yours seems to work consistently across each UI I've used it in so I don't think I was right to nitpick it in the first place. Between the help I got from your video with the drag and drop functionality and picking apart some inventory examples from other people to work out the advantages and disadvantages of different data structures and how to design things for my own game I'm happy to say my inventory system is complete and I'm already a week deep in making a complex alchemy system, which is super easy with an inventory system that already works well.

[@vitriolicAmaranth]

@@jumpkut I was talking specifically about when the item "slides under" the slots when you pick it up, but I went with the latter solution. That part was very simple to program, though. There is probably an even simpler way but my first attempt worked perfectly so I haven't messed with it afterward. I simply cached each item's index in the inventory array as well as each item's parent slot, then assigned item 1's parent transform (slot) and index to item 2 and vice versa. Edit: And a minute ago I incidentally learned about using tuples to do the same thing, reducing 7 lines of code to 2 lines of code.

[@arnebiermann4858]

Holy Shit.. Your explanations, especially the ones with custom animations are so damn good! Thanks bro :D I understood all of that very well :)

[@chiekokurokumo]

Agreed with statements above. Everything was so well laid out and explained so well. I appreciate this a ton!

[@argentumstaar]

I love you so much already! You helped me with something that no other tutorial I've found could, and in such a clear and elegant way too! ^^ I subscribed.

[@2kool4programmingschool]

Thanks for teaching me this! Just like Sam Hogan’s Cellular Automata-inspired game, i’m making a Level Maker in Unity.

[@kotokk]

I can not seem to understand. When I try to drag an item it disappears and then teleports back to its position when I release. I made sure that our codes are the same and everything else basically. But it just doesn't work...

[@jpikachups]

Probably thats because of the "transform.SetParent(transform.root)" when you begin dragging, your item goes directly to the root of your hierarchy that is not even on canvas. Your item just need another parent inside of the canvas hierarchy. Instead of this, lets say you can create a new variable with "public Transform goose" and assign with any object on this canvas, then you change the line with "transform.SetParent(goose)". Now it should be working, goose is a very kind parent

[@JohnWLivingston]

Had this issue. I deleted my item object and created an new one and it worked. Maybe try that?

[@frog2091]

If your item is being transferred to some crazy (30000000, 300000) coordinate once you implement the "transform. Position = Input.mousePosition" you might need to get to change it to "cameraNameExample.ScreenToWorldPoint(Input.mousePostition)" but as a new Vector 3 so you can ignore the Z axis.

[@ThemthingShorts]

thank you soooo much bro u saved me

[@IndianTech_Games]

But it's still not wortking

[@jamieschooling7631]

It's probably easier to just use transform.position = eventData.position;

[@boombox8408]

@@jamieschooling7631 It didn't worked

[@oldshamen]

You could also just use the position from the eventData that is passed as a parameter to the OnDrag method :)

[@Crowbar]

Exceptional tutorial! Really nice graphic design elements!

[@Grinwa]

Thank you ❤️ Can you please do a video or just explain how to get info of the object stored in the table when you drag n drop it there And store that info to costume class Something like inventory so i need to track each item on it thanks

[@CocoCode]

I’m working on the inventory video - it will be out by the end of the month 🎉

[@user-rf6lj5yu9o]

Best drag and drop tutorial

[@svenbtb]

This is a nice quick tutorial, but it's not really great for the Item and the Slot to be so tightly coupled (meaning that the scripts "know" too much about each other). It's better to just make a simple "SetNewParent" method on the DraggableItem, and then simply calling that method from the Slot instead of directly setting it like in this vid. I also recommend doing some kind of error checking, like ensuring that that the dragged item actually HAS the DragItem component, otherwise your game could crash (or throw errors). This is easy to fix with a simple if(droppedObject != null && droppedObject.GetComponent()) {//code to set new parent here} you also don't have to set image as public, just give it [SerializeField], this will let you edit it in the unity Editor without having to (needlessly) make it Public (which lets other objects mess with that data)

[@khaelus_dev]

I have done the swap items logic. In case anyone is interested. public void OnDrop(PointerEventData eventData) { if(transform.childCount == 0) { Debug.Log("DROPPED"); GameObject dropped = eventData.pointerDrag; DraggableItem draggableItem = dropped.GetComponent(); draggableItem.parentAfterDrag = transform; } else //swap items { Debug.Log("Swap items)"); GameObject dropped = eventData.pointerDrag; DraggableItem draggableItem = dropped.GetComponent(); Transform originalParent = draggableItem.parentAfterDrag; // Swap Transform itemInSlot = transform.GetChild(0); draggableItem.parentAfterDrag = transform; itemInSlot.SetParent(originalParent); dropped.transform.SetParent(transform); itemInSlot.SetAsLastSibling(); } }

[@Jimaniki]

Yeahhhh you're back ! Thank you !

[@adirmugrabi]

thank you very much for this amazing vid! i did it a bit different, but i still learned alot

[@adirmugrabi]

this is my on drop: public void OnDrop(PointerEventData eventData) { var other = eventData.pointerDrag.GetComponent(); other.transform.SetParent(transform.parent); transform.SetParent(other.lastParent); other.lastParent = null; } it swaps items when you drop one into another.

[@psychoink]

Your movies are just outstanding. Amazing job ;)

[@EarthCrossers]

Great video super easy to follow.

[@florykakaa300]

awesome animation！easy to understand

[@ghostisbusy2170]

the eventsystems engine literaly just dosent work, is there any work around? What do i do???

[@jjs5072]

Excellent tutorial! Instant Subscribe!

[@lolol-kt6vp]

Amazing tutorial! Happy to subscribe you

[@stvs9722]

Just found your channel. Damn those tuts are clean

[@B34Rocky]

I need help, i can drag the item but it disappears in the game view instantly und never comes back :(

[@Wabbel]

same problem

[@EllsDev]

Same here @@Wabbel

[@kyleme9697]

Wow that was great. Who knew it was so complicated :)

[@christopheradams2405]

THANK YOU!

[@muhammedhatay2451]

You're goddamn hero! Thanks!

[@Tobyyx3]

Hello, first of all, thanks for the great tutorial! My question is, if i have a draggable Item that has one or more children e.g. a text, the snapping does not seem to work. Do you have a solution for this problem? Edit: I found it myself: by disabling the target raycast property of the text element.

[@terrenator123]

You saved my life.

[@DeveloperJake]

Ohh this is cool

[@TricoliciSerghei]

Thank you, very you have great tutorials! ;)

[@mmokzlrsn]

great instruction and demonstration i subscribed and liked

[@FireRingStudio]

You are a genius, thank you so much!

[@HeyImGlen]

This is one fantastic tutorial

[@Derkells]

When I drag and drop my x / y values of the object go from ~25 instantly to over 5,000 in each value making the image disappear, any suggestions?

[@EllsDev]

This actually happens to me too. I'm not sure why. This is my code: using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; public class InventoryItem : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler { public Transform parentAfterDrag; public void OnBeginDrag(PointerEventData eventData) { Debug.Log("Begin"); } public void OnDrag(PointerEventData eventData) { transform.position = Input.mousePosition; } public void OnEndDrag(PointerEventData eventData) { Debug.Log("EndDrag"); } } I've tried debuging the Input.mousePosition and it looks normal but when I actually am dragging the item around the X/Y values are insane (Like 61,222 and similar for the Y) Any help on this would be awesome. glad Im not the only one

[@jjs5072]

@@EllsDev @QuailValleyBoyz If you are still having issues with this, it seems to be a problem with the coordinate system used by the mouse vs the coordinate system of the canvas: the mouse uses the World Coordinate system, while the UI object uses the canvas coordinate system (local). Read the position value of the mouse and compare it to the position value of the item. If hey are different (even if the mouse is hoovering right over said item) then that's the issue.

[@chaosroninofmagic1055]

it happen to me too Really want answer some body help please 🥺

[@jjs5072]

@@chaosroninofmagic1055 If I remember correctly, that issue happened because you are taking (x,y) coordinates from the object in relation to the canvas, and when you drop it, Unity transforms those values to world coordinates. It was something like that.

[@Klarified01]

Thanks! I have a question though. When I implement snapping, the item glitches to where the mouse is and where the inverntory slot is. It does not snap back when the mouse button is released, instead it teleports constantly between item slot and mouse position during dragging. Can you help with that?

[@MrZtapp]

As always, great tutorial

[@rrainix]

you could use internal instead of [HideInInspector] public

[@erkankumral8988]

Best explanation.. Thank you.

[@anneprocter]

Very helpful!!! Thank you!

[@user-nu4fg5vp6w]

quick actions and refactoring in vs code is not showing for me, idk why, can anyone help me?

[@duongphuonggiao]

I love you so much already!

[@chaostellar]

amazing, thanks

[@davekene]

Great video!

[@CocoCode]

Thanks David!

[@arisaek7764]

Great tutorial!

[@TegridyMadeGames]

amazing, thank you.

[@candyyyq]

How to make Item appear not only over it's parent slot, but during dragging, over every slot?

[@yudayou2646]

THANK YOU SO MUCH!!

[@Vinicius-zu3nx]

Thank you!

[@FernandoMontenegro-bc9gh]

You have a video if you want swaping items ??

[@noniceq2096]

Input.mousePos teleport to some weird places like 385101.8 when value is 486

[@andresaraya5198]

can you make a second video where you show us how to add stacks for your items? It would awesome if you can show us.

[@CocoCode]

Here you can find a full inventory tutorial (that includes stackable items): kzbin.info/www/bejne/pXukdml5l9iEh6M

[@andresaraya5198]

@@CocoCode thank you so much :D I really needed this

[@Shonia]

Nice animations!

[@ScantSword]

INCREDIBLE!

[@mattwalton431]

i am very new to programing and do not understand why i am not given any suggestions when typing int the public class line any advice?

[@chaosroninofmagic1055]

i feel like some time i drop its not snap i feel raycast doesnt work well

[@RichOrignisl]

Nice video! :)

[@diogofreitas1023]

Thanks

[@LIDOGAMES]

Really Simple 👍

[@finesseandstyle]

I feel like click once and it drags until you click again is more intuitive like in Minecraft. Pure drag and drop has fewer use cases. Anyway I learned enough to behave like that so thanks

[@erfant1471]

Very nice

[@linhdev99]

thanks

[@gothicdash]

Am I wrong or you are using 'image' without assigning it? Why you have no errors??

[@olpacheco]

You proobably forgot to assign it on the editor

[@SpringDavid]

Question: Is possible to make a tetris inventory system (ala escape from tarkov) with this?

[@DragonEmperor03]

Please do make video on how to implement this with new input system and how to do it with keyboard and game pad! Thank you!

[@enursha13drs]

throw in a start function or Awake, I used awake, Call in - using UnityEngine.InputSystem - then declare your input, findobject of type, boom straight then from there *input declared name* . input

[@enursha13drs]

new input, make sure it's a pass through and vector 2

[@Crafted_Tales]

can you make level lock and unlock pleaaaaaaaaase

[@amyjansevanvuuren2016]

If I want this to work between two different parent groups (for example, dragging and dropping between your inventory and a chest), how will I go about this?

[@asp_kley]

Please help me here's my error : argumentnullexception: value cannot be null. by the way when i'm dragging my object disappears

[@dylansmith5264]

I got it working for the most part, I can move all of them, except for the first one, it just snaps back to its original slot for some reason. Rewatched the vid three times, any clues?

[@saishsawant7410]

This is pretty awesome, but what if i want to use merge system , i want to merge two items ?? how to go about that?

[@bharatgupta1937]

The type or namespace name 'DraggableItem' could not be found (are you missing a using directive or an assembly reference?) Getting this error. IDK why. I'm new to this line of work Can someone help me? I'm using 2021.3.17f1

[@ReaganSSS]

Hi Bharat, that specific line of code is referencing a separate "DraggableItem”. Essentially Unity is looking for the script titled “DraggableItem” but is unable to find it. Likely what you have done is named your script something different from what was shown in the video. You can fix this error by writing the name you have given to the script instead of “DraggableItem” since that is likely not a script that exists in your project. For example, I named my first script “Drag” instead of “DraggableItem”, so I needed to change the code to reference the Drag script instead. Hopefully you found this helpful and were able to understand it. If you have further questions feel free to ask and I will try my best to reply.

[@bharatgupta1937]

@@ReaganSSS that makes sense now. Thank you :D

[@kozavr]

Wouldn't be easier to use EventTrigger Component?

[@filemissing5703]

how do i apply a filter to a certain slot so it will only accept a certain item?

[@AlbertoBerito]

I loved the tutorial, but how could I make items swap slots by placing one on top of the other? I have no idea I really need help.

if (transform.childCount == 1) { child = this.gameObject.transform.GetChild(0); DraggableItem draggableItem = eventData.pointerDrag.GetComponent(); child.SetParent(draggableItem.parentAfterDrag); draggableItem.parentAfterDrag = transform; } Look the inventory tutorial

[@pantheroathz4734]

3:18 Idk what I did wrong as I followed every step, but My VS doesn't show me any options to "Implement Interface" when I click on "quick actions and "refactorings" Is there maybe a certain installment missing?

[@pantheroathz4734]

also IDragHandler etc is not in colour in my code?

[@WillowBeans123]

I had trouble with this too, The way I fixed it is to just type it out by myself, and make sure you have "using UnityEngine.EvenSystems;" At the top of your script

[@pantheroathz4734]

@@WillowBeans123 I'll try this, thank you

[@soldadopreciso]

How define only a specific slot and avoid to insert in another one.

[@lma_cristian]

Hermosa explicación

[@gameplayguide2299]

My item is going out of the canvas when i am dragging it i did just like in 6:15 but its not working please any solutions for this

[@didikong6333]

How can I implement Drag and Drop with 2D Objects instead of UI Images?

[@carloslecina9029]

Hello, thx for the tutorial. But It doesn't seem to work at all on Unity 2020 LTS, I don't know why. I follow every step you did. When I drop an item, it always go back to its original slot. My code is 100% equal to yours, no change at all. Can you figure out what's happening, please?

[@RSinist-12]

Did you ever find a solution for this? I'm having the same issue.

[@RSinist-12]

Not sure if you were having the same problem as me, but I hadn't added the InventorySlot component/script to the inventory slot prefab to ensure it was on all inventory slots..

[@carloslecina9029]

@@RSinist-12 Yes, mostly. I had to rely solely on OnEndDrag and remove any OnDrop method instead. It's quite dirty and I don't like it, but it "works"...

[@_Arthyom_]

hello, very good video... greetings from argentina... how can i change position articles? (swapping)

[@chaosroninofmagic1055]

do you have any idea to drag object

[@blossomrose5134]

i love ur tutorial but how do we replace the existing item when we drag new item on the slot? like replacing it instead of not able to drop

[@WhiteCavalier15]

I changed OnDrop() to this,seems working,hope I haven't messed up XD public void OnDrop(PointerEventData eventData) { Transform parentAfterSwap; GameObject dropped = eventData.pointerDrag; DraggableItem draggableItem = dropped.GetComponent(); if (transform.childCount== 0) { draggableItem.parentAfterDrag = transform; } else { parentAfterSwap = draggableItem.parentAfterDrag; transform.GetChild(0).SetParent(parentAfterSwap); draggableItem.parentAfterDrag = transform; } }

[@Hu3sosik]

@@WhiteCavalier15 thank you so much!!

[@emretasdemiir]

you are the lifesaver and the gamechanger :D thanks man, i hope this comment got pinned because it will be using like at least 10 years by some people :D@@WhiteCavalier15

[@Enano7]

muy bueno sos un nashe

[@tadeasnapackach4496]

can u please give me a "ivnentoryItem" script ? I cant find the option there

[@user-tw9ck1qs5e]

Snapping part 7:22 , i don't have prefab

[@timed3027]

I can't right click to implement interface, there is no option to implement it.Even I use Crtl+. there are no quick solution. What should i do?

[@finesseandstyle]

Check if you have Miscellenous Files under your Visual Studio project instead of Assembly-CSharp