２Dドラッグ＆ドロップ　チュートリアル

2019年2月8日2022年12月21日

uGUIを使った、カードなどをドラッグアンドドロップで移動するチュートリアルになります

シーン構成

シーンにUIのイメージを１つ置きます
そのイメージにDraggableスクリプトをアタッチします

スクリプト

DraggableクラスにIBeginDragHandler, IDragHandler, IEndDragHandlerの３つのインターフェースを実装します
最初にこの行（４行目）を記述して、エラーが出たところをインテリセンスで修正すると３つのメソッドが自動実装されますので、ブロック内を修正すれば、コーディングの手間が省けます

using UnityEngine;
using UnityEngine.EventSystems;

public class Draggable : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    public void OnBeginDrag(PointerEventData eventData)
    {
        Debug.Log("OnBeginDrag");
    }

    public void OnDrag(PointerEventData eventData)
    {
        Debug.Log("OnDrag");
        transform.position = eventData.position;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Debug.Log("OnEndDrag");
    }
}

動作の様子

マウスで、イメージをドラッグしながら移動するとイメージがマウスと共に移動します
コンソールには、マウスをクリックした時、ドラッグ中、マウスのボタンを話した時の３パターンでログが表示されるのがわかります

参考