Easy Drag and Drop in Unity UI (Tutorial)

Поділитися
Вставка
  • Опубліковано 22 лис 2024

КОМЕНТАРІ • 69

  • @IgorSimovic
    @IgorSimovic 3 роки тому +1

    So clean! So clean! I LOVE IT!!! Great job!

    • @Noixelfer
      @Noixelfer  3 роки тому

      Thank you for your kind words! I'm really happy that you enjoyed the tutorial 😁

  • @muhammadzubairirshad6724
    @muhammadzubairirshad6724 2 роки тому +1

    Thank you very much for this tutorial Kindly Implement this Drag and Drop system using raycast

    • @Noixelfer
      @Noixelfer  2 роки тому

      Thank you! Unfortunately I don't plan to do a Drag and Drop tutorial using raycats, at least not for now

  • @ujjainsagar237
    @ujjainsagar237 2 роки тому +1

    I got an anxiety attack seeing you remember so many codes and coding so fast.

    • @Noixelfer
      @Noixelfer  2 роки тому

      Sorry and thank you 😅. I was like that too a couple of years ago but now it feels like second nature

  • @edmondeyeemceeezekiels9158
    @edmondeyeemceeezekiels9158 3 роки тому +1

    UA-cam is the real world haha.
    Keep up the good work friend. You defo put a huge smile on my face...

    • @Noixelfer
      @Noixelfer  3 роки тому +1

      Thank you for your kind message, I m glad my video helped you :D

  • @momozaki4453
    @momozaki4453 3 роки тому +3

    Thank you for sharing this helpful tutorial!
    I have a question, how can you swap any item in inventory with other item?

  • @martinkonecny2676
    @martinkonecny2676 3 роки тому +2

    This is very very nice tutorial. I am beginner in programming, but this tutorial makes my inventory running so smooth. :D

    • @Noixelfer
      @Noixelfer  3 роки тому

      Ty so much for your feedback, I'm glad that it is working well in your project

  • @masonmason22
    @masonmason22 2 роки тому +1

    Very nice tutorial. Thanks for making this.

  • @johanalmansyah6140
    @johanalmansyah6140 3 роки тому +1

    amazing technic..thank you
    I follow this method but don't know how to make reset button

    • @Noixelfer
      @Noixelfer  3 роки тому

      Hello Johan, I'm happy that you enjoyed the video. Do you mean reset button like reset the last move or reset all the items to the initial position?

    • @johanalmansyah6140
      @johanalmansyah6140 3 роки тому +1

      @@Noixelfer yes like that, back to their initial position. Can you give some direction

    • @Noixelfer
      @Noixelfer  3 роки тому

      @@johanalmansyah6140 Now, it depends very much on your implementation. But you can do the following thing: In the EquipmentSlot class write a function that clears the slot: pastebin.com/5WZrBEse (the indentation got quite messy in the pastebin) And then all you need to do is to go trough all the slots and call ClearSlot method on each of them and then you could run the initialization method again. This is a hacky and quick way to resolve your issue and a more proper one is in function of your implementation of the inventory and the way you use it. A better approach might be to keep a reference to the initial drop area in the DraggableComponent and have a Reset function which takes the DraggableComponent back to the initial drop area

  • @DavTheCanadian
    @DavTheCanadian Рік тому

    Hi, thanks for this tutorial !
    I got one question: How to make the current dragged object above of all of others objects ?
    When i use your sample and replace the "f" transparent image with a no transparent image, i got this issue...
    For example, the apple dragged from the "Gauntels" container to another container like "Greaves", the apple is not always on top if you move it onto from "Gauntels" to "Greaves" and vice-verse
    Thanks for your answer !

  • @kunz4164
    @kunz4164 3 роки тому +2

    Thanks, this was very helpful but what about dragging the item from the equipment slot back to inventory?

    • @Noixelfer
      @Noixelfer  3 роки тому

      Hello Kunz, I'm happy to hear that you found the video helpful. As for dragging the item back to the inventory, it was a common request from the users and so I did a release with this feature on github, the link is here: github.com/Noixelfer/Drag-DropTutorial/releases/tag/1.0.1

    • @kunz4164
      @kunz4164 3 роки тому +1

      @@Noixelfer amazing thanks so much!

    • @Noixelfer
      @Noixelfer  3 роки тому

      @@kunz4164 You're welcome 😁

    • @Sol-zp6kc
      @Sol-zp6kc Рік тому +1

      @@Noixelfer I've been killing my head trying to solve the issue of double equipping, you are a life savior brother, thank you!

  • @lephobix
    @lephobix 3 роки тому +1

    Awesome ty! :D

  • @a.d.6985
    @a.d.6985 4 роки тому +2

    Great Tutorial, but how to forbid to add 2 items more in the same slot?

    • @Noixelfer
      @Noixelfer  4 роки тому +2

      Oh, i forgot to cover that. You creat a DisableDrop condition which derives from DropCondition and in the Check method you always return false. Then you add it to the dropArea when an item is dropped.

    • @a.d.6985
      @a.d.6985 4 роки тому +3

      @@Noixelfer idk how to write it in C# - I'm very noobie :( Could you be more specifik?

    • @Noixelfer
      @Noixelfer  3 роки тому

      @@a.d.6985 @Kiriakos41 @
      KratosunBaltasınaSapOlanAdam Sorry for the late reply for this request. I've been planning a second part on this system for a while but it seems that I don't find the time to do it right now, so I've updated the github repository with the bug fixed (you can no longer drop 2 items on the same slot). The link is here github.com/Noixelfer/Drag-DropTutorial/releases/tag/1.0.1 if it has any problems or you have any questions regarding the changes in the code, feel free to ask me and I will answer (you can contact me on discord too). Hope that it helps you all, if you have any other sugestions I would be more than glad to hear them

  • @DillyDior
    @DillyDior 3 роки тому +1

    This is the only one that worked of all the tutorials, thank you. Also, how do i make the item return to the original spot and can move to any other slot?

    • @Noixelfer
      @Noixelfer  3 роки тому +1

      I m glad it worked for you. As regarding to your question (as i have seen is a pretty popular request) I will do a part 2 video where i will add those features as it a bit much to explain in a comment. I will try to release the video as soon as possible

  • @Sol-zp6kc
    @Sol-zp6kc Рік тому +1

    Hey I know this is a little of a stretch, I am trying to implement the system but what is happening is the following: I drag a weapon to the slot, then try adding another one to the same slot, goes back to inventory so thats working fine. BUt then when i remove the original weapon from the slot and try to drag it again to the equipment slot, it goes back to the inventory. Do you know what could be causing the issue?

    • @Noixelfer
      @Noixelfer  Рік тому

      Hello. Did you tried to do it with the bow? cause I looked into the project and the bow was bugged (it has some extra components). Also, the bow does not have the weaon component attached so it can't go into the weapon slot. Also, make sure to use the latest release at it had a couple of fixes after the video was release, you can find it here: github.com/Noixelfer/Drag-DropTutorial/releases/tag/1.0.2

  • @GlassChewer
    @GlassChewer 4 роки тому +1

    Thanks a lot, you made it very easy to understand. I just have one question regarding the EquipmentSlot class and ?? operator. I had no idea about this operator so I googled it and it seems that it's not very reliable while using it with UnityEngine.Object derivatives (GameObjects, Components, MonoBehaviours, ScriptableObjects, etc.) because their base class, UnityEngine.Object, defines its own operator ==(), operator !=(), & operator bool(). Would it be better to just add a [RequireComponent(typeof(DropArea))] attribute to the class to ensure we have that component before we look for it?

    • @Noixelfer
      @Noixelfer  4 роки тому +1

      I m glad that you enjoyed the tutorial. Regarding your question, yes, ?? operator can fail quite bad in unity but this happens (afaik) when the game object is during the destroy process but not destoryed yet (you can see that the name of the object is "null") But this should not be the case here as the gameobject is shared between EquipmentSlot and DropComponent and even if the gameobject is during the destroy process and we fail to get the DropComponent it would not matter anymore because the object will be destroyed anyway. But you can also add RequireComponent if you want :D

    • @GlassChewer
      @GlassChewer 4 роки тому +1

      @@Noixelfer Cool! Thank you for taking the time to explain this as well!

    • @Noixelfer
      @Noixelfer  4 роки тому +1

      @@GlassChewer No problem, the videos are done in order to help others with different things in Unity and I m glad to clarify questions about the things presented in the video

    • @GlassChewer
      @GlassChewer 4 роки тому

      @@Noixelfer Hello, it's me again one week later. With this system, I managed to take my inventory system to the next level, tho to work with my pre-existing system my UI's inventory slot hierarchy game object now has the following:
      ItemSlot script to hold the item
      DraggableComponent script
      Canvas - a second canvas so I can adjust the sorting layer
      Graphics Raycaster - to turns the slot on and off / prevent clicking
      also, the draggable component always returns to the original position and passes its item to the other slot if it has a drop area and ItemSot
      However, I have a tiny problem with the rect transform position, its position is not synced, it has something to do with eventData.delta / objectCanvas.scaleFactor but I cant seem to get my head around it and fix it. Do you have any idea about how could I fix this?
      Thank you again for this tutorial :D

    • @GlassChewer
      @GlassChewer 4 роки тому

      My guess is that maybe the local canvas component might interfere somehow
      Hierarchy is:
      UI:
      Inventory:
      ItemSlotGroup:
      Slot (0): here is the drop area and drop actions
      Border:
      ItemHolder: here is the draggable component and ItemSlot
      Text:

  • @sedaerkmen6691
    @sedaerkmen6691 3 роки тому +1

    With this method, if I drag another object into a box with an object in it, will the object inside return to its place in the menu? Will they switch places? I hope you understand me cause my English is kinda bad

    • @Noixelfer
      @Noixelfer  3 роки тому +1

      Hello, in the version from this video there is no condition to see if the slot is occupied or not, so you can place multiple objects on the same slot (not the desired scenario) So I've made a little update a while ago, It's the version 1.0.1 github.com/Noixelfer/Drag-DropTutorial/releases/tag/1.0.1 which won't allow you to drop an item on top of another one. A swap or the object inside returning to its place in menu would be good options and I've thought about them, maybe I'll release another version on git with those versions

    • @sedaerkmen6691
      @sedaerkmen6691 3 роки тому +1

      @@Noixelfer i think it can be really useful. Thank you so much for answering

    • @Noixelfer
      @Noixelfer  3 роки тому +1

      @@sedaerkmen6691 I'm glad that I was able to help you 😁

  • @الجوهرةالصغيرة
    @الجوهرةالصغيرة 3 роки тому +1

    Thanks a lot , but it shows this error :
    error CS0246: The type or namespace name 'DropArea' could not be found (are you missing a using directive or an assembly reference?)
    how can I fix it ?

    • @Noixelfer
      @Noixelfer  3 роки тому

      Make sure that you created the class DropArea. If you created the class DropArea but placed it in a namespace, make sure to write using namespace namespaceName in the script that you want to use the drop area, (replace namespaceName with the namespace from the DropArea) If you still have troubles, please provide more informations (you can also join the discord chanel and there I can provide better support)

  • @weedclosetgrower1653
    @weedclosetgrower1653 3 роки тому +2

    Be sure to add using System;

    • @Noixelfer
      @Noixelfer  3 роки тому +1

      Have i missed that one? usually i hit Alt + Enter to quickly add stuff like that.

    • @weedclosetgrower1653
      @weedclosetgrower1653 3 роки тому

      @@Noixelfer alt enter works too

  • @maciejbrzezinski3273
    @maciejbrzezinski3273 3 роки тому +1

    I’ve got issue with line 40 in DraggableComponent script
    1 Error: The name ‘rectTransform’ does not exist in the current context
    2 Error: ‘canvas’ does not exist in the current contex
    Any Ideas why ?

    • @Noixelfer
      @Noixelfer  3 роки тому

      Make sure that you declared the varialbles like this:
      private RectTransform rectTransform;
      private Canvas canvas;
      You can also check the code on github to see if you've missed anything. Hope that this will help you 😁

    • @maciejbrzezinski3273
      @maciejbrzezinski3273 3 роки тому +1

      @@Noixelfer Hmmm... resolve but I get more errors. I take your source code and seems all right. Thanks for quick reply.

    • @Noixelfer
      @Noixelfer  3 роки тому

      @@maciejbrzezinski3273 I'm glad that I was able to help you ☺️

  • @MindGem
    @MindGem 3 роки тому +1

    I have no clue what's going on. My Visual Studio says Action missing namespace. its all fucked.

    • @Noixelfer
      @Noixelfer  3 роки тому

      Did you declared using System;?

    • @MindGem
      @MindGem 3 роки тому +1

      @@Noixelfer yes. I have all the packets youhave in the tut.

    • @Noixelfer
      @Noixelfer  3 роки тому

      @@MindGem Then join the discord channel and I will be able to help you when I get home, in about 6 hours

  • @johnrafaelmacasaddu1034
    @johnrafaelmacasaddu1034 3 роки тому +1

    Will this work in mobile?

    • @Noixelfer
      @Noixelfer  3 роки тому +1

      Yes, it should work on mobile

  • @costin88boss74
    @costin88boss74 2 роки тому

    I Drag Handler XD

  • @kenops8631
    @kenops8631 4 роки тому

    Thx bro