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

Building a Full Featured Drag and Drop System with Inventory-like Grid

In this video, the instructor demonstrates how to create a drag and drop system with an inventory-like grid. The tutorial covers creating grid objects, inventory slots, draggable items, and implementing mouse dragging functionality.

Creating Grid Objects and Inventory Slots

• Create a UI image object to serve as the grid for placing items.

• Create an inventory slot by adding another UI image object to the grid.

• Resize the inventory slot to 240 by 240 pixels and customize its appearance.

• Convert the inventory slot into a prefab for reusability.

Fixing Spacing Issues

• Add a "Grid Layout Group" component to the parent grid object.

• Adjust cell size and spacing properties of the "Grid Layout Group" component to achieve desired spacing between slots.

Creating Draggable Items

• Right-click on an inventory slot and add a UI image object inside it.

• Customize the appearance of the item object.

• Create a new script called "DraggableItem" and attach it to the item object.

• Import Unity's event system library at the top of the script file.

• Implement interfaces related to dragging objects by right-clicking on each interface name in Unity editor and selecting "Implement Interface".

Implementing Mouse Dragging Functionality

• Modify the implemented methods in "DraggableItem" script:

• Replace throw exceptions with debug.log messages for begin drag, dragging, and end drag events.

• In OnDrag() method, update item position using transform.position = Input.mousePosition.

Handling Z-order During Dragging

• To prevent dragged items from being hidden behind other slots, unlink them from their parent during dragging.

• Save original parent reference before dragging starts (parentAfterDrag = transform.parent).

• Set canvas as the parent during dragging (transform.SetParent(canvas.transform)).

• Set item as the last sibling to ensure it appears on top of other objects (transform.SetAsLastSibling()).

Fixing Item Placement After Dragging

• To make items return to their original position after dragging, ensure they are tied to the center of inventory slots.

• Add a "Grid Layout Group" component to each inventory slot and configure it with appropriate settings (cell size, child alignment).

• Update the prefab to reflect changes made in the grid layout group.

This summary covers only a portion of the video. For a complete tutorial on creating a full inventory system, consider subscribing to the channel.

Tutorials and Creating Inventory Slot Script

In this section, the speaker discusses creating an inventory slot script for dragging items between slots in Unity.

Creating the Inventory Slot Script

• Create a new script called "InventorySlot" using UnityEngine.EventSystems.

• Implement the IDropHandler interface to handle dropped objects.

• Get the dropped object (item) using eventData.pointerDrag.

• Modify the parent of the draggable item in the OnDrag method to assign it to the new parent.

• Make the draggable item variable public and hide it from displaying in the Unity editor using [HideInInspector] attribute.

• Get the DraggableItem script from the dropped game object.

• Set draggableItem.parentAfterDrag = transform.

• Save and apply the script to the prefab.

Fixing Dragging Issue and Using Raycast Target

This section focuses on fixing an issue where dragged items snap back to their original position and introduces using Raycast Target for interaction with UI elements.

Hiding Object During Drag Process

• When releasing the mouse pointer, if an item is directly under it, it snaps back to its original parent. To fix this, hide the object from any mouse inputs during drag process.

• Use Raycast Target checkbox for UI elements. When checked, we can interact with them; when disabled, they do not exist for mouse interactions.

• Create a public Image variable at the top of DraggableItem script (public Image image;).

• In OnBeginDrag method, set image.raycastTarget = false.

• In OnEndDrag method, set image.raycastTarget = true.

Testing Multiple Slots and Stacking Items

This section covers testing drag and drop functionality between multiple slots and addressing the issue of stacking items in the same slot.

Testing Multiple Slots

• Create a prefab of the item and duplicate it into different slots.

• Test the drag and drop functionality between multiple slots.

Fixing Stacking Issue

• Inside the InventorySlot script, add an if statement to check if there are any children in the slot (transform.childCount == 0).

• Execute all the logic previously created only when there are no children in the slot.

• Test adding two items into the same slot to verify that it is no longer possible.

The transcript does not provide further content beyond this point.