本文介绍标签拖拽排序示例，把标签页拖来拖去换位置，松手后自动归位，这种拖拽排序做起来有讲究，拖的时候别的标签怎么让位、松手后怎么平滑吸回原位。思路就是每个标签都有自己固定的位置号，拖动只改谁排第几，松手后标签用平滑动画回到自己的位置上。
最终效果
按住标签左右拖，相邻标签自动让位；松手后标签带一点过冲吸回最近的卡槽，下面内容跟着标签名字走，不会乱跳。
拆开讲讲
下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整个demo分为五个部分，接下来一块一块说。
排序时只修改顺序表
这里的 order 数组是这五个标签的卡槽顺序，也是整个示例唯一需要维护的状态。delegate 的数据来源是另一份写死的名单，和 order 一一对应，顺序无关紧要，因为位置由 order 决定。
重排时只动 order，delegate 不销毁重建，所以每个标签的鼠标区域、动画对象都还在，状态不丢。这正是把 “数据” 和 “视图” 拆开的好处：视图固定五个，重排只挪数据。
每个标签算自己的卡槽位：它在 order 里的下标乘上卡槽宽，就是自己该待的横向位置，卡槽宽就是标签宽加上间距。order 一改，这个目标位置跟着变，标签就知道该去哪了。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/u011186532/article/details/166470563
