Drag a UI Image in Unity3d (C#)

Question

I need to make a map in UI. Map is big so user needs to zoom and drag it. For zoom now I use this:

public class ScaleMaps : MonoBehaviour
{
    private float zoom;
    public float zoomSpeed;
    public Image map;

    public float zoomMin;
    public float zoomMax;

    void Update()
    {
        zoom = (Input.GetAxis("Mouse ScrollWheel") * Time.deltaTime * zoomSpeed);
        map.transform.localScale += new Vector3(map.transform.localScale.x * zoom, map.transform.localScale.y * zoom, 0);
        Vector3 scale = map.transform.localScale;
        scale = new Vector3(Mathf.Clamp(map.transform.localScale.x, zoomMin, zoomMax), Mathf.Clamp(map.transform.localScale.y, zoomMin, zoomMax), 0);
        map.transform.localScale = scale;
    }
}

How to drag the image with mouse?

Try the `CubeDrag` script from [this](https://stackoverflow.com/questions/43162188/how-can-i-click-and-drag-a-gameobject-with-the-mouse/43162862#43162862) answer. That should work. — Programmer, Jun 13 '17 at 07:40

score 4 · Accepted Answer · answered Jun 13 '17 at 09:36

4

Have you tried the IDragHandler interface?

public class UIDraggable : MonoBehaviour, IDragHandler {


#region IDragHandler implementation

public void OnDrag (PointerEventData eventData)
{
    this.transform.position += (Vector3)eventData.delta;
}

#endregion
}

You will need to include the following at the top of your script..

using UnityEngine.EventSystems;

answered Jun 13 '17 at 09:36

Ben Brookes

419
4
15

But with that zooming is going to centre of image. How to fix that? – Александр Jun 14 '17 at 17:07

score 2 · Answer 2 · answered Jan 17 '20 at 10:35

Based on Ben's answer, I changed it a bit to work better with UI elements:

[RequireComponent(typeof(RectTransform))]
public class Draggable : MonoBehaviour, IDragHandler
{
    private RectTransform rectTransform;

    private void Start()
    {
        rectTransform = GetComponent<RectTransform>();
    }

    public void OnDrag(PointerEventData eventData)
    {
        rectTransform.anchoredPosition += eventData.delta;
    }
}

Drag a UI Image in Unity3d (C#)

2 Answers2