0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Unity imageをドラッグ&ドロップする

Last updated at Posted at 2021-07-26

imageをドラッグ&ドロップする

Drag.cs、Drop.cs、UISample.cs作成し、下記のコードを書く

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

[RequireComponent(typeof(CanvasGroup))]
public class Drag : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{

    //ドラッグ開始時処理
    public Action OnBeginDragAction;
    //ドラッグ中処理
    public Action OnDragAction;
    //ドラッグ終了処理
    public Action OnEndDragAction;

    private CanvasGroup _canvasGroup;
    private Vector3 _startPosition;
    private Camera _uiCamera;

    private void Awake()
    {
        _canvasGroup = gameObject.GetComponent<CanvasGroup>();
    }

    private void OnDestroy()
    {
        OnBeginDragAction = null;
        OnDragAction = null;
        OnEndDragAction = null;
        _uiCamera = null;
    }

    public void SetScreenSpaceCamera(Camera uiCamera)
    {
        _uiCamera = uiCamera;
    }

    public void OnBeginDrag(PointerEventData pointerEventData)
    {
        if (enabled == false)
        {
            return;
        }

        //ドロップ判定が取れるように
        _canvasGroup.blocksRaycasts = false;

        _startPosition = transform.position;

        if (OnBeginDragAction != null)
        {
            OnBeginDragAction();
        }
    }

    public void OnDrag(PointerEventData pointerEventData)
    {
        if (enabled == false)
        {
            return;
        }

        if (_uiCamera != null)
        {
            var position = _uiCamera.ScreenToWorldPoint(pointerEventData.position);
            position.z = transform.position.z;
            transform.position = position;
        }
        else
        {
            transform.position = pointerEventData.position;
        }

        if (OnDragAction != null)
        {
            OnDragAction();
        }
    }

    public void OnEndDrag(PointerEventData pointerEventData)
    {
        _canvasGroup.blocksRaycasts = true;

        transform.position = _startPosition;

        if (enabled == false)
        {
            return;
        }

        if (OnEndDragAction != null)
        {
            OnEndDragAction();
        }
    }

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

public class Drop : MonoBehaviour, IDropHandler, IPointerEnterHandler, IPointerExitHandler
{
    //ドロップ範囲に入ったときの処理
    public Action OnPointerEnterAction;
    //ドロップ範囲内から出たときの処理
    public Action OnPointerExitAction;
    //ドロップ時処理
    public Action OnDropAction;

    private void OnDestroy()
    {
        OnPointerEnterAction = null;
        OnPointerExitAction = null;
        OnDropAction = null;
    }

    public void OnPointerEnter(PointerEventData pointerEventData)
    {
        if (OnPointerEnterAction != null)
        {
            OnPointerEnterAction();
        }
    }

    public void OnPointerExit(PointerEventData pointerEventData)
    {
        if (OnPointerExitAction != null)
        {
            OnPointerExitAction();
        }
    }

    public void OnDrop(PointerEventData pointerEventData)
    {
        if (OnDropAction != null)
        {
            OnDropAction();
        }
    }
}
UISample
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIsample : MonoBehaviour
{
    [SerializeField]
    private Drag _drag;
    [SerializeField]
    private Drop _drop;

    //Use this for intialization
    void Start()
    {
        _drop.OnDropAction = () =>
        {
            var dropImage = _drop.GetComponent<Image>();
            var dragImage = _drag.GetComponent<Image>();
            dropImage.color = dragImage.color;
        };
    }

}

imageを2つ作成し、CanvasにUISample.csをコンポーネントする
5A79D8A0-A5BD-4D7D-A3CA-5BE6D7E40A3A.jpeg

Drop imageにDrop.csをコンポーネントする
E6C5D698-91CB-46B3-8E36-26500E299F23.jpeg

DragimageにDrag.csをコンポーネントして、カラーを変更する
D2192FAF-410D-461C-A602-A2537C8E984A.jpeg

CanvasのUISampleにDragimageとDrop imageをアタッチする
5E12DB20-7F8E-46AE-896B-59F73B1C971E.jpeg

再生し、動作確認する

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?