iter(g308): sortableList 拖到边缘自动滚动

This commit is contained in:
HIsheR
2026-10-27 00:37:45 +08:00
parent 8c88d6c33a
commit f1916ef099
6 changed files with 51 additions and 7 deletions
+9
View File
@@ -3158,6 +3158,15 @@
"motivation": "g303 给拖拽行加了抬升投影,但行仍是静态定位、没有层级——同一容器里后续兄弟元素绘制在后,被拖那一行的投影直接被下一行的底色切掉,「拿起来」看起来像贴纸被压住。层级令牌只有 dropdown 起的五档(100 起),拿它抬一行会污染语义。",
"acceptance": "① 新增 --ua-z-raised: 10 令牌(层内抬升,够压过同容器兄弟即可);② .ua-sortable-item.is-dragging 补 position: relative + z-index: var(--ua-z-raised);③ ua tokens --unused 不报新令牌、audit:visual 的 z-literal 仍为 0;④ npm run check 全绿。",
"notes": "tokens.css 新增 --ua-z-raised: 10(层内抬升档,与 dropdown 100 起的那套分层语义区分);.is-dragging 补 position: relative + z-index: var(--ua-z-raised),投影不再被后续行盖住;tokens --unused 0 个、audit:visual 合计仍 0 处,docs 重生成"
},
{
"id": "g308",
"domain": "tune",
"status": "open",
"title": "sortableList 支持拖到边缘自动滚,摘掉「长列表拖不动」的限制",
"motivation": "文档里写明「拖到边缘不会自动滚动,条目超过一屏就别用」,这等于把最常见的场景(几十条检查单)挡在门外:拖到容器下沿不动,用户只能反复滚动重来。",
"acceptance": "① dragstart 里一次算好最近的纵向滚动祖先(overflow-y auto/scroll 且确已溢出),dragover 每帧只在贴边 48px 感应带内按帧滚 12px;② 离开感应带或 dragend 立即取消帧并清状态,不留后台 rAF;③ 找不到滚动祖先(整页滚动)时不接管;④ manifest 步骤与配方 19 要点同步改写,npm run check 全绿。",
"notes": ""
}
]
}
+3 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T16:34:08.281Z",
"generatedAt": "2026-10-26T16:37:31.858Z",
"repoRoot": ".",
"packages": [
{
@@ -4695,7 +4695,8 @@
"键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动)",
"被拖的行以虚线边 + 抬升投影标示(不用整行降透明度:那会把正文对比压到 4.86,低于正文 7:1 口径),落点由指针位置决定,不会出现「拖了三格只动一格」的错觉",
"外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序",
"什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)"
"条目超过一屏也能拖:指针进入最近滚动祖先(overflow-y 为 auto/scroll 且内容确已溢出)上下 48px 感应带即按帧自动滚,松手或离开感应带立刻停;找不到滚动祖先(整页跟随滚动)时不接管滚动,交给浏览器",
"什么时候别用:需要严格的两级联动排序(树 / 表格分组)时它不够用,得自己在 onChange 里按父节点重排;跨列表搬运用两个实例各自持有顺序信号"
]
},
{