橘子科技 / 原型 / 互動

側邊欄拖曳排序

丟棄式 HTML,先讓我們實際摸過這個拖曳手感,再決定要不要搬進 React。 原生 dragstart / dragover / drop,大約 40 行 JS,零套件。 抓住左側六點圖示直接拖動。

排序只存在 DOM 裡 — 重新整理會還原。

你正在感受的細節

這些設計決策已經寫進原型裡,方便你直接挑戰它們。

  • 放置指示線會吸附到最近的列間隙,不是貼著游標 Y 軸跑。 只有當游標越過某一列的中線時才會跳位 — 看起來更果斷,少了抖動感。
  • 被拖曳的列原地保留 35% 透明度,外加 2° 微傾。 幽靈影子留在原位是為了保住「我從哪裡開始」的空間感;微傾則暗示「被舉起來了」。
  • 六點圖示是視覺提示,但整列都能拖。 滑鼠移上時圖示變深色,教使用者這個手勢,但不會逼他瞄準一個很小的命中區。
  • 沒有自動捲動,也沒有放置動畫。 刻意拿掉這兩項,先把核心手感判清楚 — 你說要加,下一輪就補上。

待決問題

  1. 已封存垃圾桶是不是應該固定在最底層、排除在拖曳之外?
  2. 放手的瞬間,要讓列滑動到新位置,還是瞬間吸附就夠了?
  3. 鍵盤操作:第一版用 Alt + 方向鍵 移動聚焦中的列,這樣夠嗎?