共计 1660 个字符，预计需要花费 5 分钟才能阅读完成。
本篇精读来自笔者代码实际，没有原文出处请谅解。
自在布局吸附线的成果如下图所示：
那么如何实现吸附线呢？咱们先演绎一下吸附线的特色：
- 正在拖动的 box 与其余 box 在程度或垂直地位间隔靠近时，会显示对齐线。
- 当吸附作用产生时，鼠标在肯定范畴内挪动都不会扭转组件地位，这样鼠标对齐就产生了肯定的容错性，用户不须要一像素一像素的调整地位。
- 当鼠标拖动的足够远时，吸附作用隐没，此时 box 跟手挪动。
依据这些规定，咱们首先要实现的就是判断以后拖动 box 与哪些组件的边足够靠近。
判断 box 离哪条边最近
间隔最近的边可能不止一条，程度与垂直地位要别离判断。咱们以程度地位为例，垂直同理。
拖动 box 在程度地位可能有 上、中、下 三条边能够产生吸附，而其余 box 同样也有 上、中、下 三条边能够与之产生交互，因而对于每一个指标 box，咱们须要计算 9 个间隔：
- source 上 vs target 上
- source 上 vs target 中
- source 上 vs target 下
- source 中 vs target 上
- source 中 vs target 中
- source 中 vs target 下
- source 下 vs target 上
- source 下 vs target 中
- source 下 vs target 下
因为 source 的每条边最多只能呈现一条吸附线，所以依照 source 聚合一下每条边的最近 target 边：
- source 上 vs min(target 上、中、下) = min 上
- source 中 vs min(target 上、中、下) = min 中
- source 下 vs min(target 上、中、下) = min 下
能够设想，当 source 与 target box 齐全一样大时，最多产生三条吸附线（上 vs 上，中 vs 中，下 vs 下）。但一旦 box 高度不同，后果就不一样了，所以咱们还须要计算 source 上、中、下 最靠近的间隔是多少：
source 所有地位最小间隔 = min(min 上、min 中、min 下)
而后依照 source 所有地位最小间隔筛选 min 上、min 中、min 下，留下来的就是要 source 间隔 target 程度地位最近的吸附线。
咱们还须要设置吸附阈值，否则所有鼠标地位都会产生吸附。所以当 source 所有地位最小间隔大于吸附阈值时，就不产生吸附成果了。
产生吸附成果
吸附的实现形式与拖拽的实现形式无关。
假如拖拽的实现形式是：dragStart 时记录鼠标的起始地位 mouseStartX（Y 同理），在 drag 时产生了位移 movementX，那么组件以后地位就是 mouseStartX + movementX。
如果咱们能够拿到吸附产生的反向位移 snapX，那么组件地位就能够实现为：
mouseStartX + movementX + snapX
能够设想当鼠标从上往下挪动时，当产生吸附时，snapX 会产生反向作用对消 box 的向下位移，从而保障 box 在吸附时在垂直方向没有产生挪动，这样吸附成果就实现了。
snapX 的值如何计算呢？其实就是上一步的“source 所有地位最小间隔”取反。
resize 时两头对齐线须要放大双倍吸附力
resize 与 drag 不同，构想 鼠标拖动 box 的下方边缘向下做 resize，此时除了组件挪动外，还产生了组件高度变高的成果，那么从上、中、下三段察看 box，其地位与鼠标位移的变动关系是：
- 上：地位不变。
- 中：地位向下位移为鼠标位移 * 0.5
- 下：地位向下位移为鼠标位移 * 1
因而如果两头地位产生了吸附线，为了对消鼠标向下挪动，须要产生两倍的 snap 反向位移：
mouseStartX + movementX + snapX * 2
总结
咱们梳理了吸附的判断条件与吸附作用如何失效，以及 resize 时中间线吸附的非凡解决逻辑。
自在布局除了吸附之外，还有哪些边界的交互，如何实现呢？心愿大家思考与留言。
探讨地址是：精读《自在布局吸附线的实现》· Issue #490 · dt-fe/weekly
如果你想参加探讨，请 点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。
关注 前端精读微信公众号
版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）
