【Unity3D-UGUI应用篇】（七）UGUI实现窗口的自由拖拽

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

推荐阅读

CSDN主页

GitHub开源地址

Unity3D插件分享

简书地址

我的个人博客

QQ群：1040082875

大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。

一、前言

前段时间分享了UGUI的每个组件的属性和使用方法，比如Text、Button、Image、Toggle、InputField、ScrollView等等。

接着分享了UGUI的一些原理，比如说UGUI的渲染模式、UGUI的缩放计算、UGUI的描点定位、UGUI的自动布局等等。

相信大家看完后会对UGUI有一个比较全面的认识了。

下面，就继续分享UGUI的UI组件进行应用的实例。

二、介绍及效果图

在使用UGUI开发项目的时候，常常会遇到需要做一个窗口拖拽的功能。

窗口拖拽的功能可以使用UGUI内置的事件接口IPointerDownHandler和IDragHandler，并在接口方法OnPointerDown和OnDrag实现了相应的拖拽逻辑即可实现。

下面，来看一下效果：

在这里插入图片描述实现比较简单，就不放源代码了。

下面就跟着博主来看一下如何实现吧。

三、实现

首先，我们搭建一个UI窗口：在这里插入图片描述 UI结构：一个Panel作为背景，然后父Image作为整个UI窗口的背景，子Image作为标题的背景，标题为窗口A。

再复制一个放到一边，修改标题窗口B。

代码实现：

using UnityEngine;
using UnityEngine.EventSystems;

public class DragWindow : MonoBehaviour, IPointerDownHandler, IDragHandler
{
    private Vector2 localMousePos;
    private Vector3 planeLocalPos;
    private RectTransform targetObject;
    private RectTransform parentRectTransform;
    private RectTransform targetRectTransform;

    void Awake()
    {
        targetObject = this.transform.GetComponent<RectTransform>();
        targetRectTransform = targetObject;
        parentRectTransform = targetObject.parent as RectTransform;
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        planeLocalPos = targetRectTransform.localPosition;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(parentRectTransform, eventData.position, eventData.pressEventCamera, out localMousePos);
        targetObject.gameObject.transform.SetAsLastSibling();
    }

    public void OnDrag(PointerEventData eventData)
    {
        Vector2 localPointerPosition;
        //屏幕点到矩形中的局部点
        if (RectTransformUtility.ScreenPointToLocalPointInRectangle(parentRectTransform, eventData.position, eventData.pressEventCamera, out localPointerPosition))
        {
            Vector3 offsetToOriginal = localPointerPosition - localMousePos;
            targetObject.localPosition = planeLocalPos + offsetToOriginal;
        }
    }
}

将代码拖到父Image身上：在这里插入图片描述运行程序即可。