拖延&释放图标的脚本实现

以"Draggable"的名称,创建C#脚本,实现Draggable类

由于需要接受当拖曳开始时发生的BeginDrag事件,拖曳过程中发生的Drag事件以及拖曳结束时发生的EndDrag事件,所以在Draggable类中,要实现IbeginDragHandle接口,IDragHandler接口和IEndDragHandler接口

public class Draggable : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler
{
    [SerializeField]
    private Vector2 draggingOffset = new Vector2(0.0f, 40.0f);//拖曳过程中图标的偏置
    private GameObject draggingObject;//保持拖曳过程中图标的游戏对象
    private RectTransform canvasRectTransform;//保持画布的Rect Transform

    /*
     从控制拖曳操作的各个事件传递出PointEventData对象作为事件处理程序的参数.
    PointEventData对象保存着鼠标或触碰操作触发事件的各种数据
    因此,首先要创建从PointerEventData对象拖曳出来的过程中,设置图标位置的方法
    此外,在触碰操作时,由于拖曳过程中的图标会被手指遮盖住,所以,会将从PointerEventData对象获取的
    屏幕坐标偏置的稍微上移一些,变换成世界坐标,设置拖曳过程中图标位置    
     */
    private void UpdateDraggingObjectPos(PointerEventData pointerEventData)
    {
        if (draggingObject != null) 
        {
            //计算出拖曳过程中图标的屏幕坐标
            Vector3 screenPos = pointerEventData.position + draggingOffset;
            //将屏幕坐标转化为世界坐标
            Camera camera = pointerEventData.pressEventCamera;
            Vector3 newPos;

            if (RectTransformUtility.ScreenPointToWorldPointInRectangle(canvasRectTransform, screenPos, camera, out newPos))
            {
                //将拖曳过程中的图标位置以世界坐标设置
                draggingObject.transform.position = newPos;
                draggingObject.transform.rotation = canvasRectTransform.rotation;
            }
        }
    }

    /*
     然后,实现开始拖曳时调用的OnBeginDrag方法
    运用OnBeginDrag方法,不同于拖曳开始时的原图标,会创建用于通过拖曳操作使之移动的图标
    在拖曳过程中 想位于拖曳图标后面的对象(释放区域等)的光线投射,由于拖曳时图标的阻挡导致事件不会发生
    所以使用Canvas Group组件的Block Raycasts属性,让光线投射不会被阻挡,这一点很重要    
     */
    public void OnBeginDrag(PointerEventData pointerEventData)
    {
        if (draggingObject != null) 
        {
            Destroy(draggingObject);
        }
        //获取元图标的Image组件
        Image sourceImage = GetComponent<Image>();

        //创建拖曳过程中图标的游戏对象
        draggingObject = new GameObject("Dragging Object");
        //设置为原图标的画布子元素 显示在最前面
        draggingObject.transform.SetParent(sourceImage.canvas.transform);
        draggingObject.transform.SetAsLastSibling();
        draggingObject.transform.localPosition = Vector3.one;

        //使用Canvas Group组件的Block Raycasts属性
        //让光线投射不被阻隔
        CanvasGroup canvasGroup = draggingObject.AddComponent<CanvasGroup>();
        canvasGroup.blocksRaycasts = false;
        //为拖曳过程中图标的游戏对象附加Image组件
        Image draggingImage = draggingObject.AddComponent<Image>();
        //设置为与原图标相同的外观
        draggingImage.sprite = sourceImage.sprite;
        draggingImage.rectTransform.sizeDelta = sourceImage.rectTransform.sizeDelta;
        draggingImage.color = sourceImage.color;
        draggingImage.material = sourceImage.material;
        //保持画布的Rect Transform
        canvasRectTransform = draggingImage.canvas.transform as RectTransform;
        //更新拖曳过程中的图标位置
        UpdateDraggingObjectPos(pointerEventData);
    }
    //实现拖曳过程中调用OnDrag方法
    //通过OnDrag方法,根据传递来的PointerEventData对象 更新拖曳过程中图标的位置
    public void OnDrag(PointerEventData pointerEventData)
    {
        UpdateDraggingObjectPos(pointerEventData);
    }
    //拖曳结束后调用OnEndDrag方法
    //当拖曳结束 拖曳过程中的图标就没有作用了 故用Destroy方法删除
    public void OnEndDrag(PointerEventData pointerEventData)
    {
        Destroy(draggingObject);
    }
}

public class Droppable : MonoBehaviour, IDropHandler, IPointerEnterHandler, IPointerExitHandler
{
    /*
     为了显示拖曳图标已经进入了可释放的范围,要采用当光标或碰撞位置进入释放区域时
    调用的OnPointerEnter方法 让释放区域中显示的图标颜色变为指定的高亮颜色
     */

    //释放区域显示的图标
    [SerializeField]private Image iconImage;//释放区域中显示的图标
    [SerializeField]private Color highlightedColor;//释放区域显示图标的高亮颜色
    private Color normalColor;//保持释放区域显示图标的原来颜色

    private void Start()
    {
        //保持释放区域中显示图标的原本颜色
        normalColor = iconImage.color;
    }

    //当光标进入区域时候调用
    public void OnPointerEnter(PointerEventData PointerEventData)
    {
        if (PointerEventData.dragging)
        {
            //如果在拖曳过程中,释放区域显示的图标颜色变更为高亮颜色
            iconImage.color = highlightedColor;
        }
    }
    //如果只是这样的话,那么即使离开释放区,图标颜色还依然保持高亮颜色
    //因此要采用当光标或碰撞位置离开释放区域时调用OnPointerExit方法,让颜色还原
    public void OnPointerExit(PointerEventData PointerEventData)
    {
        if (PointerEventData.dragging) 
        {
            iconImage.color = normalColor;
        }
    }
    //最后 实现拖曳过程中图标被释放时调用OnDrop方法
    //用OnDrop方法 获取从被传递过来的PointerEventData对象释放的图标的Image组件
    //令释放区域中已显示的图标精灵变为与被释放图标相同的精灵
    public void OnDrop(PointerEventData PointerEventData)
    {
        //获取已拖曳图标的Image组件
        Image droppedImage = PointerEventData.pointerDrag.GetComponent<Image>();
        //将释放区域中已显示的图标精灵变为与被释放图标相同的精灵 且将颜色还原
        iconImage.sprite = droppedImage.sprite;
        iconImage.color = normalColor;
    }
    //如上操作 便完成拖曳AND释放操作的UI 然后在Play模式下 确认一下动作
}