主題
拖曳放下等相關操作一開始是參考這個教學影片來學的，內容也跟這篇文的簡單教學有些差異
有興趣的人也可以去看看這個教學的作法
以下正文開始：
在遊戲中會有許多UI需要操作的部分，可能會需要一些點擊、拖曳與放下之類的操作行為
這時候就可以使用unity提供的EventSystem來處理
在unity中當創建UI物件時，可以看到Hierachy同時會自動創建一個EventSystem物件
從官方文檔上來看，EventSystem會處理Input、射線與傳送事件
EventSystem也有一個特別要注意的點，就是場景上只能有一個EventSystem
透過這個EventSystem，可以來與UI相關物件進行互動
接著就用一個簡單的例子來講如何去使用，假設我今天的需求是可以拖動圖片來移動，並在放開時回到原位
並且可以在拖動圖片到下方大圖時將圖片替換成當前拖曳的圖片
首先先建立一個Script來處理拖動相關的事件，然後繼承相關的interface
這邊要注意的是這幾個interface在UnityEngine.EventSystems這個namespace底下
BeginDrag會在開始拖動的時候執行一次，Drag會在拖動的時候持續執行，EndDrag則會在停止拖動時執行一次
接著來看如何實作這幾個interface裡面的內容
我希望能夠拖曳小圖，並且小圖在我取消拖曳放開後會回到原來的位置上
所以先來處理我需要的參數
先宣告一個RectTransform抓取自身物件身上的component，以及一個Vector2紀錄原始位置
在awake的時候先將兩個變數抓好引用，方便之後來做使用
接著依照我的需求，在Drag裡面去更新我的圖片的位置，並在EndDrag時把圖片歸位
接著別忘了將Script掛在物件上
這時候就可以完成拖曳與復位的需求了
接著來處理替換圖片的部分，先新增另外一個Script來處理放下的操作
這次使用的是IDropHandler這個interface，然後我為了方便直接用GetComponent來獲得Image這個Component
接著使用eventData.pointerDrag來取得當前被OnDrag的物件，並取得sprite來替換
最後將這個script掛在要被替換的大圖上
這時候來將圖片拖曳並放到下方大圖上，卻發現似乎沒有效果
這是因為拖動的圖片本身的raycast擋住了後面的物件，所以大圖實際上沒有被偵測到
為了解決這個問題，先在小圖身上掛上CanvasGroup這個component
這個component可以用來方便管理UI物件與這個UI物件底下的子物件
掛好component後再來對Script做一些簡單的修改
先宣告CanvasGroup後，一樣在awake裡面先抓好引用，接著在BeginDrag時關閉blocks.Raycasts
這樣就可以在開始拖動後關閉現在拖動的物件上的raycast
然後在EndDrag的時候再還原回來，讓物件可以再次被拖動
最後就可以來看成果
這樣就簡單實現了一個可以拖動UI以及更換圖片的功能
以上就是這次的內容
感謝收看
unity文件連結：
達人
