Unity基于UGUI实现拖拽功能
发表于2018-09-27
之前给大家介绍过使用NGUI实现拖拽功能,这篇我们就来看看如何使用UGUI实现拖拽功能,参考了下官方的视频教程,用到了官方的DEMO中的例子,将其中的代码稍作改动就实现了拖动功能。

一、实现拖拽功能
先上代码:
using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; using System.Collections; public class DragableCard : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler { // begin dragging public void OnBeginDrag(PointerEventData eventData) { SetDraggedPosition(eventData); } // during dragging public void OnDrag(PointerEventData eventData) { SetDraggedPosition(eventData); } // end dragging public void OnEndDrag(PointerEventData eventData) { SetDraggedPosition(eventData); } /// <summary> /// set position of the dragged game object /// </summary> /// <param name="eventData"></param> private void SetDraggedPosition(PointerEventData eventData) { var rt = gameObject.GetComponent<RectTransform>(); // transform the screen point to world point int rectangle Vector3 globalMousePos; if (RectTransformUtility.ScreenPointToWorldPointInRectangle(rt, eventData.position, eventData.pressEventCamera, out globalMousePos)) { rt.position = globalMousePos; } } }
只要继承了IBeginDragHandler、IDragHandler、和IEndDragHandler这三个接口,并实现了OnBeginDrag、OnDrag和OnEndDrag这三个方法,我们就可以实现拖拽功能。其中,OnBeginDrag处理开始拖动时要做什么事,OnDrag处理拖动过程中要做什么事,OnEndDrag处理拖动结束时要做什么事,是不是很好理解!
二、实现跟背包类似的功能
UGUI官方的例子实际是背包界面的雏形,刚好我要实现一个类似的功能,就是拖动卡片到指定区域。我同样把官方的代码稍做修改,运行,可是没有起作用,经过研究和实践,我发现必须保证指定区域对应的物体的渲染优先级比被拖动物体的高,即在Hierachy视图中,指定区域对应的物体一定要在被拖动物体的下面,如图

这样才能保证脚本中的OnDrop方法才会被调用。接下来上代码:
using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using System.Collections; public class DropMe : MonoBehaviour, IDropHandler, IPointerEnterHandler, IPointerExitHandler { public GameObject m_myCardsObj; private bool m_isIn = false; public void OnEnable() { Debug.Log("............"); } // when you release the left button of mouse public void OnDrop(PointerEventData data) { Debug.Log(string.Format(">>>>> {0}", m_isIn)); if (!m_isIn) { m_myCardsObj.GetComponent<MyCards>().UpdateShow(); } } // when the mouse moving in the game object public void OnPointerEnter(PointerEventData data) { m_isIn = true; Debug.Log(m_isIn); } // when the mouse moving out the game object public void OnPointerExit(PointerEventData data) { m_isIn = false; Debug.Log(m_isIn); } private Sprite GetDropSprite(PointerEventData data) { var originalObj = data.pointerDrag; if (originalObj == null) return null; var srcImage = originalObj.GetComponent<Image>(); if (srcImage == null) return null; return srcImage.sprite; } }
继承了IDropHandler, IPointerEnterHandler, IPointerExitHandler这三个接口,同样也实现对应的三个方法OnDrop、OnPointerEnter和OnPointerExit。其中,OnDrop处理松开鼠标左键时要做什么事,OnPointerEnter处理鼠标指针进入挂载该脚本的物体区域时要做什么事,OnPointerExit处理处理鼠标指针移出挂载该脚本的物体区域时要做什么事,还是很容易理解对吧。
这里还是强调下,通过官方的例子,会更有助于大家理解使用UGUI实现拖拽功能。
如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引