UI 拖拽与排序

🎯本节学习目标

• 掌握拖拽接口
• 实现拖放交换
• 实现拖动面板

🚀课程导读

“把物品拖进格子”“拖动画板位置”——UI 拖拽用事件系统接口实现。本课掌握。

◆拖拽基础接口

四个接口搞定拖放。

1. 实现以下接口（using UnityEngine.EventSystems;）：
2. 【IBeginDragHandler】开始拖：OnBeginDrag(PointerEventData)
3. 【IDragHandler】拖动中：OnDrag(PointerEventData)
4. 【IEndDragHandler】结束拖：OnEndDrag(PointerEventData)
5. 【IDropHandler】被放上：OnDrop(PointerEventData)（目标格子实现）
6. 【坐标】eventData.position 鼠标位置；拖动物体跟随：
7. public class DragUI : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
8. private RectTransform rt;
9. private Canvas canvas;
10. void Start() { rt = GetComponent<RectTransform>(); canvas = GetComponentInParent<Canvas>(); }
11. public void OnDrag(PointerEventData e) {
12. Vector2 pos;
13. RectTransformUtility.ScreenPointToLocalPointInRectangle(
14. canvas.transform as RectTransform, e.position, canvas.worldCamera, out pos);
15. rt.anchoredPosition = pos;
16. }
17. }
18. 【注意】Canvas 的 Render Mode 会影响坐标转换（Overlay 时 worldCamera 为 null）。
19. 【拖拽中的图片】拖拽时设置 canvasGroup.blocksRaycasts=false 防止自己挡住目标。

◆拖放交换物品

把物品拖到另一格。

1. 在物品格子脚本 Slot 上实现 IBeginDragHandler/IDragHandler/IEndDragHandler（拖起自己）+ IDropHandler（被放下）。
2. 【拖起】OnBeginDrag 记录源格子索引，设置跟随（第 166 课基础）。
3. 【放下】目标格子的 OnDrop 里读取拖拽中的“源索引”（用一个静态变量传递），交换两个格子的物品数据。
4. 【静态传递】public static int dragFromIndex = -1; 拖起时设源索引，放下时读取。
5. 【交换逻辑】
6. void OnDrop(PointerEventData e) {
7. if (DragUI.dragFromIndex >= 0 && DragUI.dragFromIndex != myIndex) {
8. (inventory[myIndex], inventory[DragUI.dragFromIndex]) = (inventory[DragUI.dragFromIndex], inventory[myIndex]);
9. inventorySystem.RefreshUI();
10. }
11. DragUI.dragFromIndex = -1;
12. }
13. 【拖拽可视化】拖起时把图标放到一个“临时拖拽层”并跟随鼠标，放下时归位。
14. 【完成】物品可拖拽交换位置。
15. 【进阶】拖到“丢弃区”删除物品；拖到“装备格”穿戴。
16. 【注意】坐标转换与层级（拖拽层在最上层）是细节重点。

⚠常见错误与排查

★动手练习

✓本节小结

UI 拖拽已掌握。下一课学 UI 与代码交互。