UE4拖拽功能的蓝图基础实现

目录

• 1、点击时记录鼠标点击位置为被拖拽UI 局部坐标下的偏移量
• 2、触发DragDetected事件
• 3、预览对象的蓝图就是创建时给sizebox的宽高赋值
• 4、drop后计算拖拽的位置
  • UE原本的版本
  • 改进版

记录一个学习UE官方拖拽UI过程，指出一个层级结构问题

1、点击时记录鼠标点击位置为被拖拽UI 局部坐标下的偏移量#

2、触发DragDetected事件#

这个事件里创建被拖拽的预览物体

预览物体可以用一个被sizebox包裹的border色块来表示

这个预览物体创建时需要传入被拖拽的UI的引用，从中获取UI的大小，然后基于这个预览对象创建继承了DragDropOperation的对象（这里就叫WidgetDrag对象）

创建这个对象时的pivot选择mouse down，最下面的offset是pivot的offset

一次dragdrop是独立的，通过这个dragdropoperation的对象可以传递DragDrop数据

3、预览对象的蓝图就是创建时给sizebox的宽高赋值#

expose on spawn可以当生成一个这个对象时让外界对这个对象赋值（WidgetDrag对象也用了这个来创建时候给要传递的数据赋值）

4、drop后计算拖拽的位置#

UE原本的版本#

使用了SetPositionInViewPort

这样会产生一个问题：先removefromparent导致被拖的UI原有的widgettree被打乱，重新addtoViewport后会被添加在别的层，使用widgetReflector查看

​ 原本的层级：

​ 拖动后的层级：

改进版#

可以保留widgettree的结构，需要指定出是在哪个canvas的geometry，就是保持着原有的tree结构在parent的canvas局部坐标下进行位置改变，注意只有canvas slot可以直接SetPosition

这样就可以自由的拖拽普通的UI了
而对于Button这类UI，他们会吃掉OnMouseButtonDown这个事件