练习目标

练习UI的拖放操作

一、相关组件

  • EventTrigger
  • Canvas Group
  • ScrollRect
  • Mask
  • Scrollbar

二、拖放练习

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

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

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,更改成不同的颜色,如下图所示:

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

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

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

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

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

修改事件代码

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设置参数值:

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

组件代码

拖拽组件,修改部分代码,更符合实际项目中使用

https://github.com/zhaoqingqing/UGUIDemo 仓库中搜索:DragDropTrigger

三、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 效果

uGUI练习(七) Drag And Drop的更多相关文章

  1. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  2. 通过HTML5的Drag and Drop生成拓扑图片Base64信息

    HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过 ...

  3. 基于HTML5的Drag and Drop生成图片Base64信息

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag ...

  4. Android 用户界面---拖放(Drag and Drop)(三)

      设计拖放操作 本节主要内容如下: 1.  如何开始拖拽: 2.  在拖拽期间如何响应事件: 3.  如何响应落下事件: 4.  如何结束拖放操作. 开始拖拽 用户使用一个拖拽手势开始拖拽,通常是在 ...

  5. Android 用户界面---拖放(Drag and Drop)(二)

      拖拽事件监听器和回调方法 View对象既可以用实现View.OnDragListener接口的拖放事件监听器,也可以用View对象的onDragEvent(DragEvent)回调方法来接收拖拽事 ...

  6. Android 用户界面---拖放(Drag and Drop)(一)

    用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中.这个框架包括:拖拽事件类.拖拽监听器.以及辅助的方法和类. 尽管这个框架主 ...

  7. 20 Best Drag and Drop jQuery Plugins--reference

    reference from:http://dizyne.net/20-best-drag-drop-jquery-plugins/ jQuery has done a great job repla ...

  8. [Javascript + rxjs] Simple drag and drop with Observables

    Armed with the map and concatAll functions, we can create fairly complex interactions in a simple wa ...

  9. HTML 5 drag and drop 简介

    Html 5 drag and drop 简介 HTML5提供了专门拖拽和拖放的API draggable属性 启用拖拽 draggable属性是否可被拖拽, 可选值: true, false, au ...

随机推荐

  1. hdu4289 最小割最大流 (拆点最大流)

    最小割最大流定理:(参考刘汝佳p369)增广路算法结束时,令已标号结点(a[u]>0的结点)集合为S,其他结点集合为T=V-S,则(S,T)是图的s-t最小割. Problem Descript ...

  2. 【CSS】class和id命名规则

    说明,本篇内容为书籍<高流量网站CSS开发技术>的学习总结,文字出自书本 书不错,推荐阅读学习 也可参阅网上的博文 原载:彬Go链接:http://blog.bingo929.com/cs ...

  3. angularJs工作日记-自定义指令Directive01

    新项目组使用完善的angularMVVM设计思路架构,很庆幸能够来到这个项目组,在这里的每一天都能够学习到新的知识,为了防止以后忘记,记录一下个人的理解 首先接触最多的是directive,direc ...

  4. 在Blade中结合gperftools检查内存泄露

    Blade是我们开发的大规模C++项目构建工具. gperftools是google开发的性能工具,由高效内存分配器,CPU性能分析器,堆分析器,堆检查器等工具组成. 和其他构建工具不同,结合gtes ...

  5. linux svn安装和配置

    linux svn安装和配置,不结合apache http://blog.51yip.com/server/901.html 张映 发表于 2010-07-07 分类目录: 服务器相关 今天有个同事在 ...

  6. AM335X的USB otg网卡(RNDIS /Ethernet Gadget)调试

    重新编译内核(2.6.29)       2.6.29内核        Device Drivers ---> USB support --->   USB Gadget Support ...

  7. tensorflow---文字识别

    读取数据的三种方法: 1. feeding : providing data when running each step : classifier.eval(feed_dict={input:my_ ...

  8. ML(3)——线性回归

    在统计学中,线性回归(Linear Regression)是利用称为线性回归方程的最小平方函数对一个或多个自变量和因变量之间关系进行建模的一种回归分析.这种函数是一个或多个称为回归系数的模型参数的线性 ...

  9. elasticsearch(六) 之 elasticsearch优化

    目录 elasticsearch 优化 从硬件上 : 从软件上: 从用户使用层 elasticsearch 优化 从硬件上 : 使用SSD 硬盘,解决io导致的瓶颈. 增大内存 但不超过32G(单实例 ...

  10. 复杂HTML页面解析

    1.层叠样式表CSS可以让html元素呈现出差异化,网络爬虫可以通过class属性的值,轻松分出不同标签 findAll函数通过标签的名称和属性来查找标签 from urllib.request im ...