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

Подписаться 48 тыс.

Просмотров 97 тыс.

50% 1

🎁 Support me and DOWNLOAD Unity project: www.patreon.com/posts/7169829...
This tutorial/guide will show you how to create a great full featured drag and drop inventory user interface. You will learn how to drag items on the screen, how to drop them into special slots, how to enable snapping back to original position and finally how to manage multiple items at once! Inventory tutorial coming soon!
--------------------------------------------------------------------------------
👨‍💻 SOCIALS:
💜 Join our Discord: / discord
🔵 Follow me on Twitter: / bionicl333
--------------------------------------------------------------------------------
🎓 YOU WILL LEARN:
- How to create unity ui grid
- How to create inventory UI
- How to implement drag and drop
- How to enable object snapping in inventory
- Simple Drag and drop implementation
--------------------------------------------------------------------------------
⚙️ VIDEO CHAPTERS:
0:00 - Intro
0:13 - Grid
1:54 - Draggable item
4:39 - Draggable item always on top
6:26 - Snapping
7:46 - Drag items between slots
11:16 - Multiple items

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 161

@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.

@bertiedev6478 10 месяцев назад

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 10 месяцев назад

Very helpful I hope it gets pinned.

@Fr33zE_YT 13 дней назад

Thank you so much!!!

@n0v3g4plays3 20 часов назад

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; }

@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 👍👍👍

@wyrda2452 Год назад

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

@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! 🎉

@brandonmitchell-kiss2533 5 месяцев назад

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

@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.

@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.

@DwarvenStudios 11 месяцев назад

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.

@StealthyShiroeanGames 5 месяцев назад

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!

@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 ;)

@Jimaniki Год назад

Yeahhhh you're back ! Thank you !

@chiekokurokumo 6 месяцев назад

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

@lagrangepoint9386 Год назад

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

@Crowbar 2 месяца назад

Exceptional tutorial! Really nice graphic design elements!

@MrZtapp 10 месяцев назад

As always, great tutorial

@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 :)

@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!!!

@lolol-kt6vp Год назад

Amazing tutorial! Happy to subscribe you

@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

@psychoink Год назад

Your movies are just outstanding. Amazing job ;)

@jjs5072 3 месяца назад

Excellent tutorial! Instant Subscribe!

@arisaek7764 Год назад

Great tutorial!

@HeyImGlen 9 месяцев назад

This is one fantastic tutorial

@adirmugrabi 11 месяцев назад

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

@adirmugrabi 11 месяцев назад

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.

@kyleme9697 Год назад

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

@user-rf6lj5yu9o Год назад

Best drag and drop tutorial

@florykakaa300 Год назад

awesome animation！easy to understand

@stvs9722 Год назад

Just found your channel. Damn those tuts are clean

@Marko2155_YouTube 11 месяцев назад

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

@anneprocter 7 месяцев назад

Very helpful!!! Thank you!

@kucirulz 9 месяцев назад

Great video!

@mmokzlrsn Год назад

great instruction and demonstration i subscribed and liked

@erkankumral8988 Год назад

Best explanation.. Thank you.

@TricoliciSerghei 10 месяцев назад

Thank you, very you have great tutorials! ;)

@duongphuonggiao Месяц назад

I love you so much already!

@ScantSword Год назад

INCREDIBLE!

@chaostellar Год назад

amazing, thanks

@yudayou2646 Год назад

THANK YOU SO MUCH!!

@tower1990 3 месяца назад

The cleanest explanation on RU-vid. 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!

@FireRingStudio 8 месяцев назад

You are a genius, thank you so much!

@EricYoungVFX Год назад

amazing, thank you.

@RichOrignisl Год назад

Nice video! :)

@muhammedhatay2451 Год назад

You're goddamn hero! Thanks!

@Vinicius-zu3nx Год назад

Thank you!

@Shonia Год назад

Nice animations!

@christopheradams2405 9 дней назад

THANK YOU!

@DeveloperJake Год назад

Ohh this is cool

@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 5 месяцев назад

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

@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?

@erfant1471 Год назад

Very nice

@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 🎉

@waleedsaeed8 8 месяцев назад

Really Simple 👍

@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 11 месяцев назад

@@jamieschooling7631 It didn't worked

@oldshamen 11 месяцев назад

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

@vitriolicAmaranth 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

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 8 месяцев назад

@@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 8 месяцев назад

@@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.

@diogofreitas1023 11 месяцев назад

Thanks

@linhdev99 3 месяца назад

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.

@ghostisbusy2170 Год назад

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

@FernandoMontenegro-bc9gh Год назад

You have a video if you want swaping items ??

@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?

@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)

@SpringDavid 9 месяцев назад

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

@saishsawant7410 11 месяцев назад

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

@candyyyq Год назад

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

@B34Rocky 9 месяцев назад

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

@Wabbel 9 месяцев назад

same problem

@EllsDev 5 месяцев назад

Same here @@Wabbel

@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): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oJAE6CbsQQA.html

@andresaraya5198 Год назад

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

@user-nu4fg5vp6w Год назад

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

@dylansmith5264 9 месяцев назад

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?

@noofbader6010 10 месяцев назад

يا اسطورة

@lma_cristian Год назад

Hermosa explicación

@finesseandstyle 10 месяцев назад

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

@filemissing5703 8 месяцев назад

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

@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 6 месяцев назад

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

@Derkells 5 месяцев назад

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 5 месяцев назад

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 3 месяца назад

@@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 2 месяца назад

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

@jjs5072 2 месяца назад

@@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.

@kozavr Год назад

Wouldn't be easier to use EventTrigger Component?

@dragonarc_gaming Год назад

Thank you so much for the tutorial. Can I asked for some help though? I was using your drag and drop, but instead of image, I use textmeshpro - text(ui). On the TextDrag script I changed all the image into TextMeshProUGUI and it gives no error in dragging. The problem is placing it into the slot. It keeps giving this error: NullReferenceException: Object reference not set to an instance of an object InventorySlot.OnDrop (UnityEngine.EventSystems.PointerEventData eventData) (at Assets/Script/InventorySlot.cs:14) in the script, it was this line: draggableItem.parentAfterDrag = transform; what do I need to change to make it take the text? Thanks in advance 🥰

@dragonarc_gaming Год назад

oh nvm, I just called the wrong script in my InventorySlot script 😋

@huninagy3198 Год назад

Which element is Bacground and Box ?

@Crafted_Tales Год назад

can you make level lock and unlock pleaaaaaaaaase

@_Arthyom_ Год назад

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

@gameplayguide2299 9 месяцев назад

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

@juanan_zzz 11 месяцев назад

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(); } }

@asp_kley 9 месяцев назад

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

@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?

@ryanlsindledecker2510 Год назад

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

@ryanlsindledecker2510 Год назад

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 Год назад

@@ryanlsindledecker2510 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"...

@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

@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

@tadeasnapackach4496 Год назад

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

@didikong6333 5 месяцев назад

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

@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

@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

@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 10 месяцев назад

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

@Enano7 2 месяца назад

muy bueno sos un nashe

@Kacperski1111 Год назад

how to make items dropp out of your inventory when you let them out of your inventory border ?

@gothicdash Год назад

when you drop with the mouse use a raycaste to hit the terrain and pass that position to a function that will instantiate the item prefab, will need some tweaks

@farisputra11 Год назад

will it work for Input.touch?

@CocoCode Год назад

Exactly the same implementation as in the video should work with the finger (instead of mouse) on mobile devices 👍

@noniceq2096 Месяц назад

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

@alexproskunov4001 Год назад

dis bcs grid component in item

@UglyDouglyss 8 месяцев назад

it keeps teleporting away from my mouse really far away

@UglyDouglyss 8 месяцев назад

oh never mind

@EllsDev 5 месяцев назад

How did you fix this? @@UglyDouglyss

@UglyDouglyss 5 месяцев назад

@@EllsDev all you have to do is change the mouse pos is to set the canvas to world not camera

@user-tw9ck1qs5e Месяц назад

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

@emretasdemiir 6 месяцев назад

bro until the last moment, i waited for the changing between them but you showed just disable to drag as second item lol :D maybe you come to my comment and fire the solution here :)