@ bluecateng/ smooth- 重排 
允许鼠标拖曳或键盘只使用香草 JS 重排列表的顺序 . 在可能情况下随CSS过渡或随同 @bluecateng/nano-spring (英语)所以感觉更自然. 这些回调允许对无障碍进行反馈.
文章 4 可访问拖放/排序列表的主要模式 在中文本中有一个如何实施无障碍的实例.
压缩前大小:4,102字节.
安装
npm i -S @bluecateng/smooth-reorder
示例
import reorder from '@bluecateng/smooth-reorder';
const container = document.querySelector('#test');
reorder(container, {
onStart: (element, position) => console.log(`Started moving element ${element} from ${position}`),
onMove: (element, position) => console.log(`Element ${element} will move to ${position}`),
onMoveEnd: (element, position) => console.log(`Element ${element} is now at ${position}`),
onFinish: (element) => console.log(`Element ${element} moved`),
onCancel: (element) => console.log(`Element ${element} move cancelled`),
});
该 CSS 必须添加到页面中 :
.draggable {
cursor: move;
cursor: grab;
touch-action: none;
}
.dragging {
z-index: 1000;
}
.placeholder {
opacity: 0;
}
.clone {
position: absolute;
left: 0;
top: 0;
will-change: transform;
}
选项
| 选项 | 说明 | 默认 |
|---|---|---|
horizontal | 列表是否为水平 . | false |
selector | 用于元素重排的 CSS 选择器 . | .draggable |
handleSelector | 重排手柄的 CSS 选择器 . | selector |
focusSelector | CSS选择器,用于元素聚焦. | handleSelector |
duration | 按动画的毫秒计算, 0 关闭它. | 200 |
onStart | 重排时调用 . | |
onMove | 当用户要求用键盘移动元素时调用(可选). | |
onMoveEnd | 在 DOM 中移动元素后调用( 可选) . | |
onFinish | 当元素被丢弃时调用 . | |
onCancel | 重排取消时调用 . |
如果用户喜欢减少运动(prefers-reduced-motion: reduce)动画被禁用,与
设置 duration 改为 0。 。 。 .
生命周期
键盘重排:焦点元素上的空间会抓住它,箭头键会移动它,空间会放下它并取消"逃生".
onStart(element, index)当元素被抓住时立即调用.- 每个箭头键调用
onMove(element, index)随即,随索引 元素将拥有。 兄弟姐妹们 然后用 CSS 转换幻灯片, DOM 是 没有 更改直到动画结束. - 当动画结束( W)
duration+ 5 ms) 元素在 DOM 中被移动onMoveEnd(element, index)与实际索引一起调用。 这是发布消息的正确地点. - 空间呼叫
onFinish(element); 逃逸电话onCancel(element)在元素被移动回它的后 原地处地. 如果动画正在运行, 按下同时键( 包括放下和取消) 将被排入队列 并按每部动画的收尾顺序处理,所以onFinish财务报告和审定财务报表onCancel总是看到最后的DOM.
指针重排通话顺序 onMoveEnd 当占位符改变位置时,和 onFinish 曾经拖走
部队已进入最后位置. onStart 财务报告和审定财务报表 onMove 不要求指针.
国家属性
容器有属性 data-reorder-state 带有其中之一的值,可用于造型或
用于测试,以了解何时可以安全地继续:
idle: 没有重新排序元素 .grabbed: 元素被抓取或拖取, 没有动画运行 .moving:移动动画正在运行.
当函数被 reorder 名为.
产出
