扫一扫分享
react-sortable-hoc是一组React高阶组件,可将任何列表转换为动画,可访问和触摸友好的可排序列表 .
与现有组件集成 拖动手柄,自动滚动,锁定轴,事件等等!
Suuuper流畅的动画
适用于虚拟化库:react-virtualized,react-tiny-virtual-list,react-infinite等。
水平列表,垂直列表或网格
触摸支持
支持键盘排序
npm install react-sortable-hoc --save
import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
const SortableItem = SortableElement(({value}) => <li>{value}</li>);
const SortableList = SortableContainer(({items}) => {
return (
<ul>
{items.map((value, index) => (
<SortableItem key={`item-${index}`} index={index} value={value} />
))}
</ul>
);
});
class SortableComponent extends Component {
state = {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
};
onSortEnd = ({oldIndex, newIndex}) => {
this.setState(({items}) => ({
items: arrayMove(items, oldIndex, newIndex),
}));
};
render() {
return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
}
}
render(<SortableComponent />, document.getElementById('root'));
手机预览