loading...

Simple UI Element Dragging Script in Unity C#

matthewodle profile image Matthew Odle ・1 min read

Attach this script to your gameobject/prefab to enable a simple drag mechanism for your UI elements. You'll also need to add the EventSystem object to your scene.

It's fairly straightforward. The overridden UnityEngine.EventSystems.OnPointerDown and OnPointerUp methods simply toggle the dragging bool. Then the Update method will modify the position of the object this script is attached to.

With this solution, the UI element's center will snap to the cursor, but to make this cleaner, an offset can be added based on the position within the UI element when the OnPointerDown is triggered.

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class UIElementDragger : EventTrigger {

    private bool dragging;

    public void Update() {
        if (dragging) {
            transform.position = new Vector2(Input.mousePosition.x, Input.mousePosition.y);
        }
    }

    public override void OnPointerDown(PointerEventData eventData) {
        dragging = true;
    }

    public override void OnPointerUp(PointerEventData eventData) {
        dragging = false;
    }
}

Posted on by:

Discussion

pic
Editor guide
 

Hey thank you for the script it's exactly what i was after, only thing i'm struggling to get it so it doesn't centre on mouse click. I would like the component to move from where the mouse is clicked. any ideas how i could do this please?