Birchline / 原型 / 交互

侧边栏拖拽排序

一份用完即弃的 HTML,目的是在搬到 React 之前先感受一下排序的手感。 原生 dragstart / dragover / drop,约 40 行 JS,零依赖。 抓住一行的圆点把它拖走。

排序只保存在 DOM 里 — 刷新页面即重置。

你在感受什么

这个原型里写死的几个设计决定,可以拿来反驳。

  • 提示线吸附到最近的间隙,而不是跟着光标 Y 坐标走。 只有越过某一行的中点才会跳一下 —— 看起来更果断,也不会一直抖。
  • 被拖的行原地保留,透明度 35%,并轻微倾斜 2°。 幽灵保留在列表里,你能看清自己从哪里出发;倾斜读作"被抬起来了"。
  • 圆点是提示性图形,但整行都可以拖。 悬停时圆点变深,引导出手势,又不会逼用户去对准一个小靶子。
  • 没有自动滚动,也没有落入动画。故意省掉,让核心手感更容易评判 —— 点头确认后下一版再加。

待讨论的问题

  1. 是否把回收站(以及归档)固定在底部,排除在排序之外?
  2. 放下时希望各行滑动到新位置,还是当前的瞬时吸附就够用?
  3. 键盘路径:用 Alt + 方向键移动当前焦点行,作为首版够不够?