关于鼠标拖拽图片
相关插件
基于核心：
◆Drill_CoreOfDragAndAdsorb 数学模型 - 拖拽与吸附核心
◆Drill_CoreOfPictureWithMouse 图片 - 图片与鼠标控制核心
主要插件如下：
◆Drill_PictureDraggable 图片 - 可拖拽的图片
◆Drill_PictureAdsorptionSlot 图片 - 图片吸附槽
目前鼠标拖拽、吸附槽只能实现部分简单拖拽的功能，
不建议以此来制作复杂的装备卡牌功能。
名词索引
以下你可以按住ctrl键点击下面的词，可以直接定位到想了解的名词：
| 可拖拽的图片 | 拖拽 拖拽偏移量拖拽清零 拖拽合并触发拖拽范围 最大同时拖拽数量 |
| 图片吸附槽 | 吸附 吸附槽 吸附偏移量吸附清零 吸附合并 断开吸附吸附类型 最大吸附数量 拖拽后可脱离槽必然吸附 一般吸附 交换吸附 |
插件关系
插件相互存在依赖关系，如下图：
可拖拽的图片
定义
1）拖拽
拖拽： 是指将一张图片从 一个位置拖移到另一个位置 的过程。
只要拖拽没有 合并，那么原位置（图中虚线）是一直被记录的，可随时归位。
2）拖拽偏移量
拖拽偏移量： 指将图片拖拽后，图片的位置与原位置的距离差。
分为X轴偏移量和Y轴偏移量。可以为负数。
拖拽清零： 清零后，图片迅速归位到 原位置。
拖拽合并： 合并后，原位置 将变为图片现在所处的位置，并以此位置为基准。
| 如果你要控制含拖拽的 图片 移动位置，最好先合并一下偏移量。避免 快捷变换操作 移动到绝对位置时出现位置偏差。 |
图片的拖拽设置
1）指令顺序
你必须先显示图片，再添加可拖拽属性，顺序不能反。
2）触发拖拽范围
触发拖拽范围： 指鼠标在点击时，图片变为 拖拽状态 的触发范围。
触发拖拽范围默认就是 碰撞体的范围，旋转、缩放、斜切 都会影响碰撞体的范围。
设置图片素材时，注意避免使用大范围都是空白透明的图片，
因为触发范围太大不适合拖拽，需要切割一下。
拖拽范围默认为 碰撞体判定，即资源图片的矩形区域。你可以修改为 像素判定，即根据图片里面的像素点是否透明来决定 是否悬停。详细可见：“16.图片 > 关于图片与鼠标控制核心.docx”。 |
3）作用域
图片可以在 战斗界面和地图界面 放置。
因此，鼠标拖拽能在 战斗界面和地图界面 中有效。
鼠标的拖拽设置
1）拖拽按键
你可以通过插件指令控制鼠标的拖拽按键：
2）最大同时拖拽数量
鼠标点击时，可以设定只有一张图片被拖拽，或多张图片同时被拖拽。
3）自动置顶图片
鼠标拖拽时，图片会自动置顶。
如果其它图片通过图钉钉在当前拖拽图片，图钉的图片也会一起被置顶。
图片吸附槽
定义
1）吸附
吸附： 是指当一张图片靠近一个吸附槽时，吸附槽 解除图片拖拽，并使图片移动到吸附槽中心点位置的过程。
吸附槽： 指能将图片吸附的对象。（如图中的圆形）
使用插件指令“>图片吸附槽 : DEBUG吸附槽范围查看 : 开启”，
可以看到 吸附槽 和 图片锚点。
吸附槽会吸附图片有几个条件：
图片锚点在吸附范围内
（槽能定义范围，可以是圆形可以是方形）
吸附类型相同
（图片能加吸附类型，槽能加吸附类型，两类型至少一个匹配才会吸附）
最大吸附数量未满
（槽吸附图片有数量限制，一般为1）
吸附的详细介绍可以结合示例中 图片管理层 进行了解。
2）吸附偏移量
吸附偏移量： 指将图片被吸附后，图片的位置与原位置的距离差。包含了拖拽偏移量。
分为X轴偏移量和Y轴偏移量。可以为负数。
吸附清零： 清零后，图片迅速归位到 原位置。
注意，吸附清零 包括 拖拽清零，执行吸附清零即 吸附+拖拽 同时清零。
吸附合并： 合并后，原位置 将变为图片现在所处的位置，并以此位置为基准。
注意，吸附合并 包括 拖拽合并，执行吸附合并即 吸附+拖拽 同时合并。
| 如果你要控制吸附的 图片 移动位置，最好先合并一下偏移量。避免 快捷变换操作 移动到绝对位置时出现位置偏差。 |
3）断开吸附
断开吸附： 是指吸附条件发生改变，造成图片与吸附槽无法继续吸附，从而断开的过程。
断开吸附后图片会立即归位，这个过程没有吸附动画。
对于玩家来说，图片突然瞬移可能看着有些不顺眼。
（断开吸附的效果与插件指令”立即清零吸附偏移量”一样）
| 插件只能在吸附时控制图片的位置与动画过程。如果某些特殊情况使得插件失去对图片的控制，则图片会立即归位到原位置。 |
下面情况会断开吸附：
图片被删除
图片的吸附功能被关闭
图片去除了相关吸附类型
吸附槽被删除
吸附槽修改了最大吸附数量，数量比 已吸附图片数量 还要小
吸附槽去除了相关吸附类型
你可以在执行 断开吸附 的指令前，合并吸附位置。这样断开吸附后，图片才不会出现瞬移现象。 |
4）吸附类型
图片有自己的吸附类型。（删除图片后配置的类型会清空）
槽有自己的吸附类型。（删除槽后配置的类型会清空）
图片可以有多个吸附类型，槽也可以有多个吸附类型。
图片与槽只要有一个吸附类型能对应，则槽就能吸附图片。
图片只能通过插件指令添加吸附类型：
槽可以配置样式，也可以通过插件指令添加吸附类型：
| 注意，如果在图片吸附时 操作去掉 槽的吸附类型、图片的吸附类型，则图片会根据吸附情况 自动 断开吸附 。 |
槽的吸附控制
1）自定义样式
吸附槽能在插件中自定义样式。
创建吸附槽时，需要指定样式创建。
2）槽类型 - 必然吸附
必然吸附：只要图片锚点进入必然吸附范围，就一定会被吸附。
鼠标拖拽经过也会被解除拖拽并吸附。
如下图的小圆圈，必然吸附的范围通常都设置比较小，或者直接关闭。
3）槽类型 - 一般吸附
一般吸附：图片进入一般吸附范围后，如果未被鼠标拖拽，才会被吸附。
如果图片是自己移动时经过了一般吸附范围，那么该图片也会被吸附。
如下图的大圆圈，一般吸附的范围通常会设置比较大。
4）槽类型 - 交换吸附
交换吸附： 图片如果已被吸附，进入不同的交换吸附范围，可以瞬间切换吸附槽。
图片如果还没被吸附，则进入交换吸附范围就会被必然吸附。
如果切换的吸附槽已经满了，则目标槽会取出一个图片过来交换吸附。
简单来说，交换吸附就是为“交换”而存在，两个吸附槽之间可以相互交换图片。
可以去看示例中 图片管理层 小爱丽丝专门介绍。
5）最大吸附数量
吸附槽可以设定最大吸附数量。
示例中 图片管理层 有小爱丽丝专门介绍。
| 注意，如果在图片吸附时 操作减少 最大吸附数量，则图片会根据吸附情况 自动 断开吸附 。 |
6）拖走过程
当图片被吸附之后，使用鼠标拖拽，可以拖走图片。
拖走图片时，原来的吸附槽会暂时停止吸附。
此时如果开启了“DEBUG吸附槽范围查看”，可以看到图片的状态为“拖走吸附”。
| 图片被吸住时，必须要鼠标拖才可以拖走。只通过事件指令无法移动吸附的图片。 |
7）设计吸附槽注意事项
两个吸附槽之间不要重叠，也不要靠的太近。
因为拖走时只会暂时停止当前槽的吸附，如果另一个槽在，那么会被另一个立即吸走。
如果设计场景中必须要非常接近（比如扑克牌）。
可以考虑使用交换吸附，或者将吸附范围改成方形。
图片的吸附控制
1）插件指令添加属性
图片只能通过插件指令添加吸附类型：
图片与吸附槽关系可以见前面章节：吸附类型 。
2）吸附功能开关
图片可以设置吸附功能开关，
创建图片后，默认吸附功能都为开启状态。
| 注意，如果在图片吸附时 关闭图片吸附功能，则图片会立即 断开吸附 。 |
3）拖拽后可脱离槽
图片可以修改 拖拽脱离槽 的开关，
默认为开启状态，即可以脱离槽。
注意，此功能只能确保图片拖出范围时，又会被吸回去。
如果是 断开吸附 的情况，则无法吸回去。
从零开始设计（DIY）
设计拼图解谜
示例中的 设计-限时拼图 就是基于 拖拽插件与吸附插件 设计出来的谜题。
你可以去看看“14.鼠标 > 解谜设计-限时拼图.docx”。
拼图解谜可以设计成两种类型：
传统型（一个个拼图碎片拖进拼图板）
交换型（拼图碎片随机分布在拼图板内，拖拽拼图碎片能交换碎片位置）
具体可以去 设计-限时拼图 的第二关解谜。
设计书本交换解谜
1. 设置一个目标
2023年2月11日，作者我在看 逆风笑up主 的视频时 看见了类似的解谜。
《A Little to the Left》
https://www.bilibili.com/video/BV1vd4y1r7Vu/
当时吸附槽功能还没 交换吸附 的功能，然后作者我记了个坑，没填。
后来，2024年4月，作者我对所有 图片类 插件进行大更新，然后我想起了这个。
这个功能看起来很简单，于是我开坑了。
然后我就经历了一整个星期的数学模型构建的折磨。w(ﾟДﾟ)w
看起来的简单功能，实际上一点都不简单。
2. 结构规划/流程梳理
》槽有三种类型：必然吸附、一般吸附、交换吸附。
要设计书本的解谜，使用 交换吸附。
》书本不能被拖走，所以要关闭可脱离槽设置。
》注意配置细节：
吸附槽最大吸附数量为1；
拖拽最大数量为1；
吸附类型自定义为：书本。
》解谜时，需要书本的花纹，作者我想了想，就用字母与单词好了：drill_up。
3. 素材设计
要形成书本+字母的解谜，
“drill_up”一共有8个字母，但”l”是重复的，所以只需要画7张书本图片即可。
绘制书本图形，这里作者我使用的时矢量工具画图。
画一个圆角矩形，加阴影渐变，加花纹，加上下高亮的边角，最后再加字母即可。
PS也可以画书本，使用形状工具即可。
最后画出了七个书本图像：
4. 图片与吸附槽设计
根据前面的规划，样式设计如下。
吸附槽可以为动态，考虑到这里是量子妹世界的书本，所以这里开启了浮动效果。
使用插件指令建立8个交换吸附槽。
画出来的图片宽度为86，所以每隔90像素放置一个槽。
然后，按顺序摆出 drill_up 的全部字符。（方便写判断）
吸附到槽时，设置为乱序。
在游戏中测试效果如下，
通过鼠标拖拽，能实现书本交换。
5. 顺序判定与校验
判定用到了数组插件：
Drill_CoreOfNumberArray 系统-变量数组核心
书本数量为8，对应 1，2，3，4，5，6，7，8 槽。
其中字母"l"是重复的，所以 4,5 和 5,4 都能通过。
所以使用下面的插件指令：
将判断结果存储到 开关21，22。
只要有一个开关符合，就通过，
所以判断的指令如下。
通过上述方式，即可完成交换界面的全部流程。
