UI编辑器案例：拖拽建塔

1. 需求

1. 通过拖拽控件在场景中创建单位；
2. 场景被分为若干个格子，单位只能站在某个格子的正中间；
3. 拖拽过程中，如果拖拽的点还在UI范围内，则显示一张图片，否则显示式神的真实单位；

2. 拼界面

首先我们来拼个界面，就让这个式神的列表位于屏幕的正下发，紧贴屏幕左下角和右下角。基于以上需求，我们需要一个水平滚动列表，列表中有若干个按钮，通过按钮的拖拽事件实现拖拽建塔。

2.1 底板`spt_bg`

为了美观，可以先配置一个底板，使用一个九宫的图片即可。我将其命名为`spt_bg`，锚点在左下角，位置为`(0, 0)`，尺寸为`(100%, 180)`。



2.2 按钮列表`list_btn_unit`

然后就是真正的功能部分，需要配置一个水平滚动列表，我将其命名为`list_btn_unit`，同样的锚点在左下角，位置为`(30, 0)`，尺寸x为`100%-60`，主要是需要利用列表的裁剪功能。



2.3 配置列表项

列表项内有1个控件：`btn_unit`，是个按钮。`btn_unit`是用来响应拖拽事件的功能性按钮。



2.4 拖拽显示图片`spt_unit`

同时，我们还需要配置一个拖拽显示的图片`spt_unit`，初始隐藏。

3. 配置界面数据

现在列表里只有一个犬神的头像，这显然不是我们的需求。不如我们就用『可用式神数组』来获取所有式神的头像好了。

顺便也把单位类型的id给定义好。



配置好了之后，在界面初始化事件下，修改列表项的内容。



4. 画格子

画格子就很简单了，根据坐标算一算～



5. 拖拽

终于到了最核心的部分：拖拽！～

5.1 拖拽过程整理

1. 需要知道当前拖拽的点是在`spt_bg`内还是在`spt_bg`外；
2. 如果原本就在`spt_bg`内，但是拖拽过程中判断到鼠标的位置在`spt_bg`外面了，那么证明是从`spt_bg`内部出去了，想要创建单位；
3. 如果原本不在`spt_bg`内，但是拖拽过程中判断到鼠标的位置在`spt_bg`内部了，那么证明是从`spt_bg`外部回来了，想要撤销创建；
4. 需要变量：`spt_unit_show`表示在控件内部时的图片是否处于显示状态，`drag_outside`表示原本是在外部还是内部，`drag_unit`表示当前正在拖拽的单位及其有无；

5.2 原本在`spt_bg`的外部

5.2.1 从`spt_bg`外部回到`spt_bg`内部

如果从控件外部回来，就把`spt_unit`显示出来，并且设置好对应的状态。



同时，将已经创建的单位删除掉。



5.2.2 保持在`spt_bg`外部

如果鼠标保持在`spt_bg`的外部，首先我们要先算出界面坐标对应的场景点在二维格子方阵中的索引值，因为我们只需要把单位放到格子上。



接下来要判断`1 <= i && i <= 10 && 1 <= j && j <= 10`才能走之后的逻辑，否则这个场景点超出了我们的实现范围。

如果在实现的场景范围内，且判断到还没创建单位，就先创建单位。



然后再判断`i`和`j`与上次的`last_i`、`last_j`有区别，那么要移动一下单位到当前格子里。



5.3 原本在`spt_bg`内部

5.3.1 从`spt_bg`内部拖到`spt_bg`外部

如果从`spt_bg`拖出去，就把`spt_unit`隐藏掉，并且设置好对应的状态。



5.3.2 保持在`spt_bg`内部

如果保持在`spt_bg`的内部，如果`spt_unit`还没有显示出来则优先显示`spt_unit`。



然后更新`spt_unit`的位置，保证拖拽效果。



5.4 拖拽结束

拖拽结束时同样先判断拖拽结束的点在哪里，如果在控件外部就算出场景点在格子方阵中的索引值并在格子正中心创建单位。



创建完成后，将所有状态回归拖拽前的状态。