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,如需转载请自行联系原作者


相关文章
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2820 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
2月前
|
API UED 容器
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
在这篇博客中,我们将深入探讨 Element UI 中的自定义滚动条及弹出层管理技巧。文章详细介绍了 el-scrollbar 组件的使用和参数设置,以及 PopupManager 如何有效管理弹出层的 z-index。我们还将探讨如何实现灵活的全屏组件,利用 vue-popper 创建自定义弹出层,最后介绍 ClickOutside 指令的用法。这些高级技巧将帮助你提升 Element UI 应用程序的用户体验与交互灵活性。
307 1
深入探索 Element UI:自定义滚动条与弹出层管理的技巧
|
6月前
|
JavaScript
uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick
这段内容是关于一个使用 Vue 的代码示例,涉及`u-collapse`组件的使用问题。代码展示了如何通过`v-for`循环渲染`levelList`和`filmList`数据。当`u-collapse`以手风琴模式运行时,`filmList`的数据加载后未能正确展开。问题在于尽管尝试了官方文档的方法和网络上的其他解决方案,但`filmList`依然无法正常显示。
237 4
nvue中list组件下拉刷新后无法上拉加载更多
nvue中list组件下拉刷新后无法上拉加载更多
138 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
455 1
|
前端开发 JavaScript 小程序
uniapp中scroll-view局部滚动的各种场景
可滚动视图区域,用于区域滚动。使用竖向滚动时,需要给 scroll-view 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给 scroll-view 添加 white-space: nowrap; 样式
541 0
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
578 0
|
JavaScript 容器
Element UI - v-infinite-scroll无限滚动组件
Element UI - v-infinite-scroll无限滚动组件
846 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui框架的el-dialog弹出框被遮罩层挡住了
347 0
element-ui框架的el-dialog弹出框被遮罩层挡住了
element-ui:el-dialog遮罩层变黑
element-ui:el-dialog遮罩层变黑
555 0