Setting boundary for drag and drop UI script

Unity Engine
1

Hello all, forgive my ignorance. Maybe you can help me understand.

I have a drag and drop script which I copied from a YouTube Turtorial. The script uses the IPointerDownHandler event system stuff and works fine. However, I only want to be able to drag items within a defined area.

How would I amend the following script to achieve such a result, please?

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class DragDrop : MonoBehaviour, IPointerDownHandler, IBeginDragHandler, IEndDragHandler, IDragHandler
{

    [SerializeField] private Canvas canvas;
    private RectTransform rectTransform;
    private float DragXPosition;
    private float DragYPosition;

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


    public void OnBeginDrag(PointerEventData eventData)
    {
        throw new System.NotImplementedException();
    }

    public void OnDrag(PointerEventData eventData)
    {
        rectTransform.anchoredPosition += eventData.delta / canvas.scaleFactor;

    }

    public void OnPointerDown(PointerEventData eventData)
    {
        throw new System.NotImplementedException();
    }

    void IEndDragHandler.OnEndDrag(PointerEventData eventData)
    {
        throw new System.NotImplementedException();
    }
}

For instance if I want the drag function to stop at <=200, how do I modify the recTransform?

I see that we can get .x and .y from the eventData.delta.x

Do we set rectTransform as a new Vector2?

Thanks for helping a newb :slight_smile:

2

Is it appropriate to amend the script? Wouldn’t it be better to adjust the size of the RectTransform in the scene or prefab where you drop stuff? That way if the screen shape or pixels changes, it can be properly anchored and change appropriately, not requiring you to have special code for various sized screens.

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

https://discussions.unity.com/t/845782/4

https://discussions.unity.com/t/848795/5

3

Thanks for the answer Kurt. I’ll check out the links you listed.

For my current purpose amending the script would suffice. I only use this drag and drop once and game has to be set to 1080p Resolution. So, I’m not worried about the issues you noted.

I’m using UI images on the canvas to plot co-ordinates in game. Think football pitch with shirts on which can be dragged about. Only, shirts should not be dragged outside of defined ‘pitch’ area…

4

So, to implement drag boundary, I think we need to store the new rectTransform in a variable as a Vector2. A float for the x.axis, and a float for the y axis. So, I came up with this…

public void OnDrag(PointerEventData eventData)
    {

        DragXPosition = (rectTransform.anchoredPosition.x + eventData.delta.x) / canvas.scaleFactor;
        DragYPosition = (rectTransform.anchoredPosition.y + eventData.delta.y) / canvas.scaleFactor;

        if (DragXPosition <= 200)
        {
            rectTransform.anchoredPosition = new Vector2(200f, DragYPosition);
        }

        else
        {
            rectTransform.anchoredPosition += eventData.delta / canvas.scaleFactor;

        }
       
    }

It Works :smile:

Now need to figure if/else/ statements for the rest of the boundaries.

Is what I’ve done correct?

5

OK, so a few days in now and maybe starting to understand stuff better. To create the rest of the boundaries, I came up with this…

public void OnDrag(PointerEventData eventData)
    {

        DragXPosition = (rectTransform.anchoredPosition.x + eventData.delta.x) / canvas.scaleFactor;
        DragYPosition = (rectTransform.anchoredPosition.y + eventData.delta.y) / canvas.scaleFactor;


        if (DragXPosition <= 200f)
        {
            DragXPosition = 200f;
        }

        if (DragXPosition >= 600f)
        {
            DragXPosition = 600f;
        }

        if (DragYPosition <= -170f)
        {
            DragYPosition = -170f;
        }

        if (DragYPosition >= 230f)
        {
            DragYPosition = 230f;
        }


        rectTransform.anchoredPosition = new Vector2(DragXPosition, DragYPosition);


    }

And It works great.

2 Likes