用Drag and Drop 和 Scroll Box 制作可以拖动的背包【UE4】【Blueprint】

第一步

创建一个名为的UserWidget，这个用于单个物品。创建两个分贝名为BackpackA和BackpackB的UserWidget，作为两个背包。在这两个背包中创建一个ScrollBox，改名为Content。

第二步：为两个背包创建subwidget_sigleitem

为了使这些物品具有辨识度，在subwidget_sigleitem中加了两个变量：Num(编号)ParentBag(父物体)，将它们的expose-on-spawn

勾选上。

注意：如果只将Expose on Spawn 勾选上会报一个警告信息。

Expose on Spawn ：当创建类的时候需要给变量赋予初始值的时候就要用到。

第三步：关键的一步

在subwidget_sigleitem中重载On Mouse Button Down函数

点击Override就能看到

这个函数表示当鼠标按下subwidget_sigleitem时触发的事情，内容如下：

Detect Drag if Pressed 表示监测是否有拖动现象(针对鼠标左键)，将事件监测结果返回出去。

第四步

新建一个继承自DragDropOperation名为DragAndDrop的蓝图。

将DragAndDrop中的Pivot设为CenterCenter。

第五步

subwidget_sigleitem中重载On Drag Detected函数，表示当有拖拽被检测到时，执行如下过程：

Payload 表示拖拽后拖拽源将会损失这一物件(自动消失，不用做Remove From Parent的处理)，Default Drag Visual表示拖动显示的样式，也就是粘着鼠标上的那个图标。

第六步

在BackpackB中重载On Drop函数。

 

这个函数表示当BackpackB被Drop(拖拽的最后一个瞬间，释放)时调用。

自己实现将物品按照鼠标位置所在地插入。

获取当前屏幕位置----->用"MyGeometry"翻译物理屏幕位置，得到本地位置(本地位置是指游戏窗口里的本地位置，是一个和窗体大小、窗体所处物理屏幕的位置无关的一个位置值)------>用这个本地位置获得鼠标所在处的排列序号，最后四舍五入添加到这个位置上面即可。

第七步 解释GetFocusIndex函数

以下列出一个方程组计算排序序列号和当前鼠标位的关系表达式：

当前鼠标的本地位置 = 当前鼠标的绝对位置经过窗口几何的Absolute to Local  也就是前面提到的：

当前鼠标的本地位置 - ScrollBox在画布上的偏移位置(下图中的红色箭头) = 鼠标相对于ScrollBox顶的位置

鼠标相对于ScrollBox顶的位置 + ScrollBox的拉动偏移(拉动偏移是指这个ScrollBox被拉拽了多少) = 鼠标相对于ScrollBox首个物体的理论位置的距离H，即下图中红色箭头的长度

 

上述的H   ÷  单个物体的长度   =   当前鼠标位置的序列号(类型为小数，将其用Round节点四舍五入就好)

GetFocusIndex函数体如下所示：

第八步 解释AddNewItem函数

如果在GetFocusIndex中得到的序列号大于当前的物品数，那就直接给ScrollBox添加一个子物体。

否则的话，就取出ScrollBox里面的子物体，然后insert这个物品(以Array的insert实现)，清空ScrollBox在放置到ScrollBox中。

注意：每次进入函数后要将数组清空

AddNewItem函数如下图所示：

 

 

 

原文链接