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

imageをドラッグ＆ドロップする
---

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


```C#: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();
        }
    }

}
```




```C#: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();
        }
    }
}
```





```C#: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を２つ作成し、CanvasにUISample.csをコンポーネントする
![5A79D8A0-A5BD-4D7D-A3CA-5BE6D7E40A3A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/1686e887-0f92-ca60-4e2f-18401ba37290.jpeg)


Drop imageにDrop.csをコンポーネントする
![E6C5D698-91CB-46B3-8E36-26500E299F23.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/220ca5de-9ed3-3983-ad70-2771d096b916.jpeg)


DragimageにDrag.csをコンポーネントして、カラーを変更する
![D2192FAF-410D-461C-A602-A2537C8E984A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/fb46bb1a-a005-924d-cbab-1b4165ac281c.jpeg)


CanvasのUISampleにDragimageとDrop imageをアタッチする
![5E12DB20-7F8E-46AE-896B-59F73B1C971E.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/1b5b0702-b278-f3be-7a6b-b83909af440e.jpeg)


再生し、動作確認する