uGUI练习(五) Draggable Object

简介:



练习目标

学习制作一个可拖动的UI

一、步骤

监听UI的Drag事件,需要我们写一点点的代码。

1、创建一个Panel ,设置size为(100,100)

2、创建DraggableObjectScene.cs脚本

3、把脚本绑定在Panel上

image

4、脚本内容如下:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class DraggableObjectScene : MonoBehaviour,IDragHandler,IPointerDownHandler,IPointerUpHandler
{
    //Drag事件,设置目标的位置为鼠标的位置
    public void OnDrag(PointerEventData eventData)
    {
        GetComponent<RectTransform>().pivot.Set(0,0);
        transform.position=Input.mousePosition;
    }
    
    public void OnPointerDown(PointerEventData eventData)
    {
        //缩小
        transform.localScale=new Vector3(0.7f,0.7f,0.7f);
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        //正常大小
        transform.localScale=new Vector3(1f,1f,1f);
    }
}

Class DraggableObjectScene 继承了IDragHandler,IPointerDownHandler,IPointerUpHandler三个接口,从而可以接受到 OnDrag(PointerEventData eventData)  ,OnPointerDown(PointerEventData eventData)   ,OnPointerUp(PointerEventData eventData)  三个事件

二、事件系统

Namespace:UnityEngine.EventSystems

IDragHandler (MouseDrag)

Interface to implement if you wish to receive OnDrag callbacks.

IPointerDownHandler (MouseDown)

Interface to implement if you wish to receive OnPointerDown callbacks.

IPointerUpHandler (MouseUp)

Interface to implement if you wish to receive OnPointerUp callbacks.

三、Drag 效果

Drag UI

本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/3972923.html,如需转载请自行联系原作者


相关文章
iview的走马灯嵌套在模态框中,宽度为0的解决方案
iview的走马灯嵌套在模态框中,宽度为0的解决方案
|
JavaScript 前端开发 开发者
element组件与动画使用
1.什么是Element Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,封装很多常用组件,官网是element.eleme.cn/#/zh-CN/com…,下面就简单介绍 element。
533 0
element组件与动画使用
|
JavaScript 容器
Element UI - v-infinite-scroll无限滚动组件
Element UI - v-infinite-scroll无限滚动组件
906 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
541 1
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
630 0
|
5月前
|
前端开发
伪类中使用element图标
如何在CSS伪类中使用Element UI图标,以及伪类与伪元素在CSS3中的区别和应用。
55 1
伪类中使用element图标
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui框架的el-dialog弹出框被遮罩层挡住了
363 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
|
4月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
491 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧

热门文章

最新文章