这是一篇关于在用户界面（UI）中实现可重新排序列表（reorderable list）的文章，主要内容总结如下：

• 主要观点：可重新排序列表是 UI 中常见的组件，但常被错误构建，作者认为有更好的实现方法，并用 JavaScript 实现了一个无 React 和库的可拖动排序列表。

• 关键信息：

  • 介绍了两种常见的排序交互方式，一种是显示插入元素的“预览”（ghost element），另一种是用插入标记（insertion cursor）指示插入位置，作者更倾向于后者。
  • 实现可重新排序列表的关键是分析用户的预期，即“相对于某个元素进行排序”，并通过计算欧氏距离找到最接近的元素，确定用户是要在该元素之前还是之后插入。
  • 对于不同的布局（如垂直列表、画廊式布局），确定插入位置的方法有所不同，需要使用二进制空间分区（binary space partitioning）来确定插入的“前后”意图。

• 重要细节：

  • 计算元素质心（centroid）时要考虑滚动偏移（scrollX 和 scrollY），以获取页面坐标而不是视口坐标。
  • 可以使用简单的启发式方法（如计算前两个质心的坐标差）来自动检测列表的方向。
  • 实现过程中可以进行一些优化，如使用平方距离比较、根据元素大小匹配指针位置、使用 IntersectionObserver 裁剪出视口外的元素等。
  • 最后用函数式编程的方式总结了可重新排序的算法，它可以处理多种情况，如在列表开头或结尾插入、插入任意对象等，并易于缓存。