Unity UGUI拖拽移动

简介: 本文介绍了两种UI拖拽实现方式:精准拖拽和克隆拖拽。精准拖拽通过计算鼠标点击点与UI中心的偏移量,使UI跟随鼠标移动,适用于需要精确控制的场景。代码中通过`IBeginDragHandler`、`IDragHandler`和`IEndDragHandler`接口实现拖拽逻辑。克隆拖拽则在拖拽时克隆一个UI对象,使其跟随鼠标移动,适合视觉效果需求较高的场景。代码中同样使用上述接口,并在拖拽结束时销毁克隆对象。具体实现可参考提供的代码示例。

两种方式实现
一种是精准拖拽,一种是克隆拖拽
第一种精准拖拽的
代码如下:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
/// <summary>
/// 挂在要拖拽的ui上即可
/// </summary>
public class TuoDongImage : MonoBehaviour,IBeginDragHandler ,IDragHandler,IEndDragHandler 
{
    public bool isPrecision=true;  //精准拖拽为true ,鼠标一直在UI中心可以为false
    //存储图片中心点与鼠标点击点的偏移量
    private Vector3 offect;
    //存储当前拖拽图片的RectTransform组件
    private RectTransform m_rt;
    void Start()
    {
        m_rt = this.transform.GetComponent<RectTransform>();
    }
    public void OnBeginDrag(PointerEventData eventData)
    {
        //如果是精确拖拽则进行计算偏移量操作
        if (isPrecision)
        {
            // 存储点击时的鼠标坐标
            Vector3 tWorldPos;
            //UI屏幕坐标转换为世界坐标
            RectTransformUtility.ScreenPointToWorldPointInRectangle(m_rt, eventData.position, eventData.pressEventCamera, out tWorldPos);
            //计算偏移量   
            offect = transform.position - tWorldPos;

        }
        //否则,默认偏移量为0
        else
        {
            offect = Vector3.zero;
        }
        //m_rt.position = Input.mousePosition + offect;
        SetDraggedPosition(eventData);

    }

    //拖拽过程中触发
    public void OnDrag(PointerEventData eventData)
    {
        //m_rt.position = Input.mousePosition + offect;
        SetDraggedPosition(eventData);
    }

    //结束拖拽触发
    public void OnEndDrag(PointerEventData eventData)
    {
        //m_rt.position = Input.mousePosition + offect;
        SetDraggedPosition(eventData);
    }
    private void SetDraggedPosition(PointerEventData eventData)
    {
        //存储当前鼠标所在位置
        Vector3 globalMousePos;
        //UI屏幕坐标转换为世界坐标
        if (RectTransformUtility.ScreenPointToWorldPointInRectangle(m_rt, eventData.position, eventData.pressEventCamera, out globalMousePos))
        {
            //设置位置及偏移量
            m_rt.position = globalMousePos + offect;
        }
    }

}

第二种克隆拖拽的
代码如下:

/******************************************
 * 项目名称:UGUI通用
 * 脚本功能:UI图片拖拽功能(将脚本挂载在需要拖放的图片上)
*******************************************/
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class Clonephoto : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
    private GameObject objj;
    private RectTransform m_rt;//canvas下面的一个ui
    private Vector3 offect;
    private RectTransform rect;
    void Start()
    {
        //查找这个ui(前提是必须得有这个UI)
        m_rt = GameObject.Find("Canvas").GetComponent<RectTransform>();
        rect = this.transform.GetComponent<RectTransform>();
    }
    //开始拖拽
    public void OnBeginDrag(PointerEventData eventData)
    {
        //ui屏幕坐标转换为世界坐标
        RectTransformUtility.ScreenPointToWorldPointInRectangle(rect, eventData.position, eventData.
            pressEventCamera, out offect);
        //克隆自己在m_rt上面显示
        objj = Instantiate(transform.gameObject,m_rt);
        //objj.transform.GetComponent<RectTransform>().sizeDelta = new Vector2(80, 80); //设置ui大小
        //objj.transform.localScale = new Vector3(0.7f, 0.7f, 0.7f);                  //设置一下拖的时候大小,显得好看一点点,可要可不要
        objj.transform.GetComponent<RectTransform>().anchoredPosition = Input.mousePosition -offect; //计算偏移量
    }
    //拖拽中
    public void OnDrag(PointerEventData eventData)
    {
        if (objj !=null )
        {
            objj.transform.GetComponent <RectTransform>().anchoredPosition = Input.mousePosition-offect;
        }
    }
    //结束拖拽
    public void OnEndDrag(PointerEventData eventData)
    {
        if (objj!=null)
        {
            Accuracy_testing.name = objj.transform.name;
             objj.SetActive(false);
             Invoke("ShanChu", 0.1f);            
        }
    }
    void ShanChu()
    {
        Destroy(objj.gameObject);
    }

}

最后自行测试吧

相关文章
|
3天前
|
机器学习/深度学习 人工智能 自然语言处理
PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型
DeepSeek 系列模型以其卓越性能在全球范围内备受瞩目,多次评测中表现优异,性能接近甚至超越国际顶尖闭源模型(如OpenAI的GPT-4、Claude-3.5-Sonnet等)。企业用户和开发者可使用 PAI 平台一键部署 DeepSeek 系列模型,实现 DeepSeek 系列模型与现有业务的高效融合。
|
3天前
|
人工智能 搜索推荐 Docker
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
DeepSeek R1 + LobeChat + Ollama:快速本地部署模型,创建个性化 AI 助手
1810 97
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
|
1月前
|
供应链 监控 安全
对话|企业如何构建更完善的容器供应链安全防护体系
阿里云与企业共筑容器供应链安全
171370 16
|
10天前
|
Linux iOS开发 MacOS
deepseek部署的详细步骤和方法,基于Ollama获取顶级推理能力!
DeepSeek基于Ollama部署教程,助你免费获取顶级推理能力。首先访问ollama.com下载并安装适用于macOS、Linux或Windows的Ollama版本。运行Ollama后,在官网搜索“deepseek”,选择适合你电脑配置的模型大小(如1.5b、7b等)。通过终端命令(如ollama run deepseek-r1:1.5b)启动模型,等待下载完成即可开始使用。退出模型时输入/bye。详细步骤如下图所示,轻松打造你的最强大脑。
8195 86
|
1月前
|
供应链 监控 安全
对话|企业如何构建更完善的容器供应链安全防护体系
随着云计算和DevOps的兴起,容器技术和自动化在软件开发中扮演着愈发重要的角色,但也带来了新的安全挑战。阿里云针对这些挑战,组织了一场关于云上安全的深度访谈,邀请了内部专家穆寰、匡大虎和黄竹刚,深入探讨了容器安全与软件供应链安全的关系,分析了当前的安全隐患及应对策略,并介绍了阿里云提供的安全解决方案,包括容器镜像服务ACR、容器服务ACK、网格服务ASM等,旨在帮助企业构建涵盖整个软件开发生命周期的安全防护体系。通过加强基础设施安全性、技术创新以及倡导协同安全理念,阿里云致力于与客户共同建设更加安全可靠的软件供应链环境。
150306 32
|
23小时前
|
人工智能 自然语言处理 JavaScript
宜搭上新,DeepSeek 插件来了!
钉钉宜搭近日上线了DeepSeek插件,无需编写复杂代码,普通用户也能轻松调用强大的AI大模型能力。安装后,平台新增「AI生成」组件,支持创意内容生成、JS代码编译、工作汇报等场景,大幅提升工作效率。快来体验这一高效智能的办公方式吧!
819 4
|
2天前
|
API 开发工具 Python
阿里云PAI部署DeepSeek及调用
本文介绍如何在阿里云PAI EAS上部署DeepSeek模型,涵盖7B模型的部署、SDK和API调用。7B模型只需一张A10显卡,部署时间约10分钟。文章详细展示了模型信息查看、在线调试及通过OpenAI SDK和Python Requests进行调用的步骤,并附有测试结果和参考文档链接。
614 5
阿里云PAI部署DeepSeek及调用
|
10天前
|
人工智能 自然语言处理 Java
Spring AI,搭建个人AI助手
本期主要是实操性内容,聊聊AI大模型,并使用Spring AI搭建属于自己的AI助手、知识库。本期所需的演示源码笔者托管在Gitee上(https://gitee.com/catoncloud/spring-ai-demo),读者朋友可自行查阅。
930 41
Spring AI,搭建个人AI助手
|
3天前
|
机器学习/深度学习 人工智能 并行计算
一文了解火爆的DeepSeek R1 | AIGC
DeepSeek R1是由DeepSeek公司推出的一款基于强化学习的开源推理模型,无需依赖监督微调或人工标注数据。它在数学、代码和自然语言推理任务上表现出色,具备低成本、高效率和多语言支持等优势,广泛应用于教育辅导、金融分析等领域。DeepSeek R1通过长链推理、多语言支持和高效部署等功能,显著提升了复杂任务的推理准确性,并且其创新的群体相对策略优化(GRPO)算法进一步提高了训练效率和稳定性。此外,DeepSeek R1的成本低至OpenAI同类产品的3%左右,为用户提供了更高的性价比。
751 10
|
2月前
|
弹性计算 人工智能 安全
对话 | ECS如何构筑企业上云的第一道安全防线
随着中小企业加速上云,数据泄露、网络攻击等安全威胁日益严重。阿里云推出深度访谈栏目,汇聚产品技术专家,探讨云上安全问题及应对策略。首期节目聚焦ECS安全性,提出三道防线:数据安全、网络安全和身份认证与权限管理,确保用户在云端的数据主权和业务稳定。此外,阿里云还推出了“ECS 99套餐”,以高性价比提供全面的安全保障,帮助中小企业安全上云。
201992 15
对话 | ECS如何构筑企业上云的第一道安全防线