Unity中如何修改选中图片的渲染顺序？拖动前置实现方案

问题核心 #

在Grid Layout Group的同级Image对象中，拖动时需要让选中的对象渲染在最上层，避免被其他同级UI遮挡。你的现有代码修改了父Canvas的层级，这会影响所有子UI，并非最优解。

改进实现方案 #

推荐两种更精准的方式：

方式1：调整同级对象的兄弟索引（最简易） #

Unity的UI渲染顺序遵循同级对象越靠后（兄弟索引越大），渲染层级越高的规则。拖动开始时将选中对象移到父物体的最后，结束后恢复原索引即可：

using UnityEngine;
using UnityEngine.EventSystems;

public class DragAndDrop : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    private RectTransform selfRectTransform;
    private int originalSiblingIndex;

    private void Start()
    {
        selfRectTransform = GetComponent<RectTransform>();
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        // 记录原兄弟索引，然后移到父物体最后（渲染最上层）
        originalSiblingIndex = selfRectTransform.GetSiblingIndex();
        selfRectTransform.SetAsLastSibling();
    }

    public void OnDrag(PointerEventData eventData)
    {
        // 适配Canvas缩放的拖动逻辑（解决原代码拖动速度异常问题）
        Vector2 adjustedDelta = eventData.delta / GetComponentInParent<Canvas>().scaleFactor;
        selfRectTransform.anchoredPosition += adjustedDelta;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        // 恢复原兄弟索引
        selfRectTransform.SetSiblingIndex(originalSiblingIndex);
    }
}

方式2：使用Sorting Group组件（更灵活） #

如果需要更复杂的层级控制（比如跨组层级），可以给每个Image对象添加Sorting Group组件，拖动时临时提升其排序优先级：

1. 给每个需要拖动的Image添加Sorting Group组件
2. 修改代码如下：

using UnityEngine;
using UnityEngine.EventSystems;

public class DragAndDrop : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    private RectTransform selfRectTransform;
    private SortingGroup sortingGroup;
    private int originalSortingOrder;
    // 定义全局临时最高层级值，避免多个对象拖动时冲突
    private static int tempTopSortOrder = 100;

    private void Start()
    {
        selfRectTransform = GetComponent<RectTransform>();
        sortingGroup = GetComponent<SortingGroup>();
        if (sortingGroup == null)
        {
            sortingGroup = gameObject.AddComponent<SortingGroup>();
        }
        originalSortingOrder = sortingGroup.sortingOrder;
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        // 临时设置为全局最高层级，每次拖动后递增避免冲突
        sortingGroup.sortingOrder = tempTopSortOrder++;
    }

    public void OnDrag(PointerEventData eventData)
    {
        Vector2 adjustedDelta = eventData.delta / GetComponentInParent<Canvas>().scaleFactor;
        selfRectTransform.anchoredPosition += adjustedDelta;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        // 恢复原排序层级
        sortingGroup.sortingOrder = originalSortingOrder;
    }
}

编辑器层面的辅助设置 #

你提到的Layer面板设置顺序，实际是通过修改Sorting Layer的优先级：

• 打开Edit > Project Settings > Tags and Layers，在Sorting Layers列表中添加自定义层级
• 给需要优先渲染的对象设置更高优先级的Sorting Layer，拖动时配合代码切换即可

内容的提问来源于stack exchange，提问作者mystheman