Unity UI: Drag & Drop Items

Ryan McCoach

6 min readJul 18, 2023

Intro

In this article I will cover how to click to drag objects and drop them into the correct slots.

The UI is made up 3 slot images and 3 gem images. The slots each have a color that matches one of the gems’ colors.

This will require the use of Unity’s UI Event System and more specifically the Drag type interfaces.

Drag Item

First, lets start to drag the gem images so we will create a new script called “Draggable” and attach it to the gem image. In order to use the UI Events, we need to declare that we are using the .EventSystem to access the library.

Declare the interface (event) that we are going to use and that will be the drag event. There will be an error line and you can simply fix it by clicking the on help icon to create the interface.

This will create the OnDrag interface with a throw line. This line basically means do nothing.

Delete the throw line. Instead, we are going to set the position of the gem image to the pointer’s position as it drags.

Just like that we are clicking and dragging items.

Drop Item Back to Start

Next, when the item is dropped we are going to have it return to its start position. We need the End Drag interface.

The OnEndDrag interface runs when the pointer is released and stops the drag.

For us to be able to return the gem image back to its start position we need to save the start position. We are going to declare an Image and Vector3 type variables. The Vector3 is going to be public because it will need to be accessed by other scripts.

On Start, store the Image component to the _image variable. This gives us access to its position. Next, set oldPosition to the image’s local position. This is done using the recTransform and not Transform because it is an Image and we want the position relative to the Canvas and Background image.

Create a public method when it is called will set the gem image’s local position back to the old position or start position.

In the OnEndDrag event, we delete the throw line and call the ResetPosition method we just created.

Anytime we drop the item it will now return back to its starting position.

Drop Item to Correct Slot

Last, when the gem image is dropped on the matching slot it will not stick to the slot.

Before we create the drop script, we want to be able to read the image of the slot or drop zone. This cannot be done since the gem image is layered on top of the slot or drop zone and the raycast cannot hit it.

Using the BeginDrag event, we can turn off the Raycast Target which will have the pointer ignore the gem image and read what is beneath.

When the gem is dropped or the drag has ended, we want to turn the Raycast Target back on, so the pointer can read it and drag it.

Create a new script and this script will be attached to the slot or drop images. We are going to use the Drop event that will run when a drag has ended on the object.

Again, we need to know slot or drop zone’s position so we can be able to set the gem image’s position to it and we need to know the name of the gem image to check to see the correct one is being dropped on the slot or drop zone.

Declare an Image type variable to get the access to the position and a string type and serialize it, so we can assign the name of the correct gem for the slot in the inspector.

Grab the Image component and store it in the Image variable in the On Start.

In the inspector, on the slot/dropzone image, type the exact name of the correct image to be dropped.

In the OnDrop interface (when the item is dropped), we check to see if the name of the item being dragged is the same as the correct item name we put into the inspector.

If it is, that means the correct gem image is being dropped into the slot/drop zone.

To position the gem into the drop zone, we can get the script (Draggable) of the item being dragged and access the public old position variable. This was that variable that stored the gem’s start position, but now we set it to the slot/drop zones local position.