ugui拖拽

Posted 2022-12-24 sanyejun

之前一直用fgui,现在项目用ugui找了下ugui拖拽的文章，可以直接用

https://blog.csdn.net/eazey_wj/article/details/69788909

 

【准备工作】
相关基础知识与注意事项烦请参见拙作——事件接口（零）总述

【接口介绍】
IDragHandler
该接口实现方法如下：

public void OnDrag(PointerEventData eventData)

//当鼠标在A对象按下并拖拽时 A对象每帧响应一次此事件
//注：如果不实现此接口，则后面的四个接口方法都不会触发
Debug.Log("OnDrag " + name);


IInitializePotentialDragHandler
该接口实现方法如下：

public void OnInitializePotentialDrag(PointerEventData eventData)

//当鼠标在A对象按下还没开始拖拽时 A对象响应此事件
//注：此接口事件与IPointerDownHandler接口事件类似
// 有兴趣的朋友可以测试下二者的执行顺序这里不再赘述
Debug.Log("OnInitializePotentialDrag " + name);


IBeginDragHandler
该接口实现方法如下：

public void OnBeginDrag(PointerEventData eventData)

//当鼠标在A对象按下并开始拖拽时 A对象响应此事件
// 此事件在OnInitializePotentialDrag之后响应 OnDrag之前响应
Debug.Log("OnBeginDrag " + name);


IEndDragHandler
该接口实现方法如下：

public void OnEndDrag(PointerEventData eventData)

//当鼠标抬起时 A对象响应此事件
Debug.Log("OnEndDrag " + name);


IDropHandler
该接口实现方法如下：

public void OnDrop(PointerEventData eventData)

//A、B对象必须均实现IDropHandler接口，且A至少实现IDragHandler接口
//当鼠标从A对象上开始拖拽，在B对象上抬起时 B对象响应此事件
//此时name获取到的是B对象的name属性
//eventData.pointerDrag表示发起拖拽的对象（GameObject）
Debug.Log(eventData.pointerDrag.name + " OnDrop to " + name);

【应用案例】
案例说明
本案例将实现从图片组中拖出图片到目标时，释放鼠标则目标变为拖入的图片。

具体实施
（1）创建五个 Image，其中三个命名为 Image Source 并指定不同的图片作为其“Source Image”属性，其余两个命名为 Image Target，不指定图片。五张图片看心情随便摆一摆；
（2）创建 DragImage 脚本，将其指定给所有 Image Source，并添加如下代码：

/*- - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Script Editor: Eazey丶亦泽
/* Blog Adress: http://blog.csdn.net/eazey_wj
/* GitHub Adress: https://github.com/Eazey
/*- - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Either none appetency, or determined to win. */

/* * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Script Overview:
* The script target is that realize effect of drag
* image.
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class DragImage : MonoBehaviour,
IDragHandler,IBeginDragHandler,IEndDragHandler

private Image image;
private GameObject go;

void OnEnable()

image = GetComponent<Image>();

public void OnBeginDrag(PointerEventData eventData)

if (image.sprite == null)

Debug.LogError("Current component of ‘Image‘ have none ‘Sprite‘.");
return;

go = new GameObject("Draging");
go.transform.SetParent(eventData.pointerDrag.transform.parent);

go.transform.localPosition = Vector3.zero;
go.transform.localScale = Vector3.one;

Image goImg = go.AddComponent<Image>();
goImg.sprite = image.sprite;
goImg.raycastTarget = false;

public void OnDrag(PointerEventData eventData)

if (go == null)
return;

go.transform.position = Input.mousePosition;

public void OnEndDrag(PointerEventData eventData)

Destroy(go);
go = null;



（3）创建 DropImage 脚本，将其指定给所有的 Image Target，并添加如下代码：

/*- - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Script Editor: Eazey丶亦泽
/* Blog Adress: http://blog.csdn.net/eazey_wj
/* GitHub Adress: https://github.com/Eazey
/*- - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Either none appetency, or determined to win. */

/* * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Script Overview:
* The script target is change the image after it had
* dropped.
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class DropImage : MonoBehaviour,IDropHandler

private Image image;

void OnEnable()

image = GetComponent<Image>();
if (image == null)
image = gameObject.AddComponent<Image>();

public void OnDrop(PointerEventData eventData)

Sprite s = GetSprite(eventData);
if (s != null)
image.sprite = s;

private Sprite GetSprite(PointerEventData eventData)

GameObject goSource = eventData.pointerDrag;
if (goSource == null)
return null;

Image imgSource = eventData.pointerDrag.GetComponent<Image>();
if (imgSource == null)
return null;

DragImage DragSource = imgSource.GetComponent<DragImage>();
if (DragSource == null)
return null;

return imgSource.sprite;



（4）最终效果如下图所示：

————————————————
版权声明：本文为CSDN博主「Eazey丶亦泽」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/eazey_wj/article/details/69788909