iter(g303): 拖拽行改用抬升投影,不再压正文对比
This commit is contained in:
@@ -4563,7 +4563,7 @@
|
||||
"items 传全部条目文案、顺序即当前顺序:文案同时是排序键,所以必须唯一(重名会分不清谁被搬动)",
|
||||
"鼠标 / 触摸按住任意一行拖动,指针越过邻行中线就换位;松手后写回 value 信号并触发 onChange,拖拽期间不重排避免手势中断",
|
||||
"键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动)",
|
||||
"被拖的行以虚线边框 + 淡色虚影标示,落点由指针位置决定,不会出现「拖了三格只动一格」的错觉",
|
||||
"被拖的行以虚线边 + 抬升投影标示(不用整行降透明度:那会把正文对比压到 4.86,低于正文 7:1 口径),落点由指针位置决定,不会出现「拖了三格只动一格」的错觉",
|
||||
"外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序",
|
||||
"什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)"
|
||||
]
|
||||
|
||||
@@ -2716,7 +2716,7 @@ button.ua-step-dot:hover {
|
||||
color: var(--ua-color-text);
|
||||
font-size: var(--ua-font-size-md);
|
||||
cursor: grab;
|
||||
transition: background var(--ua-duration-fast) var(--ua-ease), border-color var(--ua-duration-fast) var(--ua-ease);
|
||||
transition: background var(--ua-duration-fast) var(--ua-ease), border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease);
|
||||
}
|
||||
.ua-sortable-item:hover {
|
||||
background: var(--ua-color-tint-accent-weak); /* 低视觉比重的悬停底色 */
|
||||
@@ -2733,13 +2733,18 @@ button.ua-step-dot:hover {
|
||||
border-style: dashed;
|
||||
border-color: var(--ua-color-accent);
|
||||
background: var(--ua-color-tint-accent);
|
||||
opacity: 0.7; /* 拖拽中的虚影:本体留在原地随指针走,稍淡以示「正在被搬」 */
|
||||
box-shadow: var(--ua-shadow-2); /* 用抬升投影表达「被拿起」:整行降不透明度会把正文对比压到 4.86(低于正文 7:1 口径) */
|
||||
cursor: grabbing;
|
||||
}
|
||||
.ua-sortable-item:hover .ua-sortable-grip {
|
||||
color: var(--ua-color-accent); /* 悬停时把手转强调色:提示「这一行可以抓」 */
|
||||
}
|
||||
.ua-sortable-grip {
|
||||
flex: none;
|
||||
color: var(--ua-color-text-faint);
|
||||
font-size: var(--ua-font-size-sm);
|
||||
line-height: var(--ua-leading-none);
|
||||
transition: color var(--ua-duration-fast) var(--ua-ease);
|
||||
}
|
||||
|
||||
/* —— 轮播 —— */
|
||||
|
||||
Reference in New Issue
Block a user