1、建立一個工程

2、建立Panel(會自動建立Canvas 和EventSystem)，將Panel中的Image元件刪除，重新命名為MainPanel。

3、在MainPanel下面建立Panel，調整大小，新增Grid Layout Group元件---能夠自動的排列子物體。將Child Alignment改成Middle Center;

3、在Panel下面建立Panel，重新命名slot，新增Grid Layout Group元件,將Cell Size中的x,y都改成90，Child Alignment改成Middle Center;

4、在slot中建立一個image,重新命名為drag,在source Image新增影象。新增元件Canvas Group；拖拽到project作為預製體,刪除slot下面的drag;

5、多複製幾個slot,調整他們之間的間距

6、將Panel複製，調整位置，調整大小，可以多增加幾個slot。將預製體drag拖拽到所有的slot中當子物體，並且改變裡面的影象

7、建立指令碼DragHandle，拖拽到drag預製體上，現在實現的功能：能夠拖拽圖片，但是鬆開滑鼠後會回到初始的位置

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems; // 匯入名稱空間

// 繼承幾個介面，用於拖拽
public class DragHandle : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler
{
    
 
// 拖拽的物體
    public static GameObject itemBeginDragged;
    // 初始位置
    Vector3 startPos;

    // 開始拖拽
    public void OnBeginDrag(PointerEventData eventData)
    {
        itemBeginDragged = gameObject;
        startPos = transform.position;
    }

    // 拖拽中
    public void OnDrag(PointerEventData eventData)
    {
        
 
// 
        transform.position = Input.mousePosition;
    }

    // 結束拖拽
    public void OnEndDrag(PointerEventData eventData)
    {
        itemBeginDragged = null;
        transform.position = startPos;
    }

 
}

8、修改上面的程式碼

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems; // 匯入名稱空間

// 繼承幾個介面，用於拖拽
public class DragHandle : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler
{
    // 拖拽的物體
    public static GameObject itemBeginDragged;
    // 初始位置
    Vector3 startPos;
    // 記錄拖拽物體的父物體
    Transform startParent;

    // 開始拖拽
    public void OnBeginDrag(PointerEventData eventData)
    {
        itemBeginDragged = gameObject;
        startPos = transform.position;
        startParent = transform.parent;
        // 拖拽的時候不能阻擋射線，不然一會在卡槽中放置的時候，射線射不到卡槽上
        GetComponent<CanvasGroup>().blocksRaycasts = false;
    }

    // 拖拽中
    public void OnDrag(PointerEventData eventData)
    {
        // 
        transform.position = Input.mousePosition;
    }

    // 結束拖拽
    public void OnEndDrag(PointerEventData eventData)
    {
        itemBeginDragged = null;
        // 結束拖拽後，讓它能接受射線
        GetComponent<CanvasGroup>().blocksRaycasts = true;
        // 如果沒有設定新的父物體，就回到原來的地方。
        if (transform.parent == startParent)
        {
            transform.position = startPos;
        }
        
    }

 
}

9、建立指令碼SlotHandle,拖拽到所有的slot，現在實現的功能是-能夠往卡槽上拖拽圖片，每個卡槽上只能放一個，沒有放到卡槽上，會回到原來的地方

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

public class SlotHandle : MonoBehaviour,IDropHandler
{
    public GameObject item
    {
        get
        {
            // 如果有子物體在返回，沒有就為空
            if(transform.childCount > 0)
            {
                return transform.GetChild(0).gameObject;
            }
            return null; 
        }
    }

    // 
    public void OnDrop(PointerEventData eventData)
    {
        // 如果上面沒有物體，就能放置
        if (!item)
        {
            DragHandle.itemBeginDragged.transform.SetParent(transform);
        }
    }

    
}