uGUI练习(七) Drag And Drop

简介:



练习目标

练习UI的拖放操作

一、相关组件

  • EventTrigger
  • Canvas Group
  • ScrollRect
  • Mask
  • Scrollbar

二、拖放练习

1、创建一个Panel,命名Panel1,添加EventTrigger组件,稍稍改一下Panel的颜色

image

2、Panel1下创建一个Text,输入”Test Draggable\n       object”,设置字体颜色及Text超出处理

image

DragDropScene.cs代码

3、在 uGUI练习(五) Draggable Object一文中,已经大概了解uGUI的EventSystem,需要继承三个事件接口,接下来我们创建一个DragDropScene.cs,代码如下

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

public class DragDropScene : MonoBehaviour,IDragHandler,IPointerDownHandler,IPointerUpHandler 
{
    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);
    }
}

4、上面的代码就是 按下,拖动,抬起 这三个事件的处理.把这个脚本绑定在Panel1,按Ctrl+P 运行游戏,在Game视图我们就可以拖动Panel1了.

5、选中创建好的Panel1,按Ctrl+D Copy 几个Panel,更改成不同的颜色,如下图所示:

image

6、在上面的步骤中,我们创建了几个Panel1,并且给它们都绑定了DragDropScene.cs,但还没有实现Drop的事件;

接下来,我们创建一个Panel,命名DropPanel,用来作停放Panel的容器

7、在DropPanel下创建一个Panel,命名Grid,并给它添加Grid Layout Group和Canvas Group组件

image

8、为了让我们知道Drop是可以停放的,我们在Grid下创建两个Panel,同样的给它们绑定DragDropScene.cs,如下图:

imageimage

9、接下来就是把Panel,拖动并停放在DropPanel下,如下图所示

image

 

修改事件代码

10、打开DragDropScene.cs脚本,添加一行,并修改OnPointerDown(),OnPointUp( )

[SerializeField] GameObject grid=null,rootCanvas=null;
public void OnPointerDown(PointerEventData eventData)
{
    transform.localScale=new Vector3(0.7f,0.7f,0.7f);
    transform.parent=rootCanvas.transform;
}

public void OnPointerUp(PointerEventData eventData)
{
    transform.localScale=new Vector3(1f,1f,1f);

    RaycastHit2D hit = Physics2D.Raycast(Input.mousePosition,-Vector2.up);
    if (hit.collider != null) {
        //如果射线检测到的gameobject为grid,就把当前Panel放在grid节点下
        if(hit.collider.gameObject.name=="Grid")
            transform.parent=grid.transform;
    }
}

上面的代码,当鼠标抬起时,如果是在Grid的上方,就把当前Panel设置在Grid下,鼠标按下时,设置当前Panel的Parent为rootCanvas11、为DragDropScene设置参数值:

image

 

12、到这一步,我们就可以拖动Panel放到Grid下了,为了避免Grid下的Panel超出,在uGUI练习(六) ScrollView一文中我们使用了SrollRect和Mask。所以现在我们就给DropPanel添加上这两个组件,当然最后也可以给DropPanel添加Scrollbar

image

三、CanvasGroup

CanvasGroup是一个容器,可以用来改变child的Alpha,Raycasting,Enable state.

可以用来改变child元素的state.

比如:在一段时间内window变淡,在同一个group里的child元素的alpha值也会受到影响,alpha 值=任何嵌套的group相乘。乘以canvas元素的alpha值.

CanvasGroup 可以配置为不遮挡 射线(在这个group里的任何物件都不用为图形射线考虑) ,并且元素是否相互作用.

四、EventTrigger

从事件系统接收事件并调用每一个已注册的事件.

在每一个特殊的函数中,都可以使用EventTrigger,你可以在一个事件上注册多个函数,当EventTrigger接收事件时,将按提供的顺序调用.

注意:将EventTrigger组件绑定在任何Gameobject上之后,它将拦截一切事件,并在这个对象上没有冒泡事件出现.

五、Drag && Drop 效果

Drag Drop-1

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

相关文章
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
82 0
|
1月前
|
Web App开发 移动开发 iOS开发
HTML5 拖放(Drag 和 Drop)1
HTML5拖放功能是标准的一部分,允许用户将任何元素从一个位置拖放到另一个位置。此功能在主流浏览器如IE、Firefox、Chrome和Safari中得到支持(注意Safari 5.1.2除外)。通过拖放,可以实现更直观的交互体验,例如将RUNOOB.COM图标拖入指定矩形框内。
|
1月前
|
移动开发 HTML5
HTML5 拖放(Drag 和 Drop)2
为了实现元素的可拖放功能,首先需将元素的 `draggable` 属性设为 `true`。接着,使用 `ondragstart` 事件指定拖动开始时的动作,通过 `dataTransfer.setData()` 设置拖动数据的类型和值。`ondragover` 事件用于确定放置位置,并通过 `event.preventDefault()` 允许放置。最后,`ondrop` 事件触发时执行放置操作,使用 `dataTransfer.getData()` 获取拖动数据并将其追加到目标元素中。
|
1月前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
122 9
|
5月前
|
前端开发
css 平滑滚动 scroll-behavior: smooth
css 平滑滚动 scroll-behavior: smooth
79 1
|
7月前
|
JavaScript API UED
drag / drop
"拖放"(Drag and Drop)是一种常见的计算机操作方式,指将一个对象从一处移动到另一处,通常通过鼠标或触摸屏手势来实现。这种操作方式在许多应用程序中被广泛采用,例如在文件管理器中移动文件,在图像编辑器中调整图片大小和位置等。 拖放操作的步骤一般如下:
42 6
|
前端开发
css:scroll-behavior:smooth让页面平滑滚动
css:scroll-behavior:smooth让页面平滑滚动
117 0
Qt实现鼠标拖放(drag/drop)
Qt实现鼠标拖放(drag/drop)
233 0
Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)
原文:Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)   在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown、MouseLeftButtonUp和MouseMove)来完成,实际应用中我们可以通过行为(Behavior)特性将拖放操作封装为行为,这样可达到代码复用的效果。
1080 0
UGUI中Event Trigger的基本用法
UGUI中Event Trigger的基本用法 本文提供全流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) C...
1261 0