0.1.45 • Published 1 year ago
@asany/sortable v0.1.45
AsanySortable
基于 React-Dnd 封装的拖拽排序组件
Install
npm i @asany/sortable # or yarn add @asany/sortable
Usage
const defaultStyle = {
border: '1px dashed gray',
padding: '0.5rem 1rem',
marginBottom: '.5rem',
marginRight: '.5rem',
backgroundColor: 'white',
};
const SortItem = forwardRef(({ data, style, className }: SortableItemProps<any>, ref: any) => {
return (
<li
className={className}
style={{ ...defaultStyle, ...style }}
ref={drag(ref)}
>
{data.name}
</li>
);
}
);
const Example = () => {
const [items, setItems] = useState([
{ id: '1', name: '小明', type: 'sortable-card' },
{ id: '2', name: '陈二', type: 'sortable-card' },
{ id: '3', name: '张三', type: 'sortable-card' },
{ id: '4', name: '李四', type: 'sortable-card' },
{ id: '5', name: '老五', type: 'sortable-card' },
{ id: '6', name: '赵六', type: 'sortable-card' },
{ id: '7', name: '王七', type: 'sortable-card' },
]);
const handleChange = (data, event) => {
setItems(data);
};
return (
<DndProvider backend={HTML5Backend}>
<AsanySortable
accept={['sortable-card']}
tag="ul"
style={{ listStyle: 'none', padding: 0 }}
items={items}
onChange={handleChange}
itemRender={SortItem}
/>
</DndProvider>
);
};
Maintainers
License
MIT © 李茂峰
0.1.45
1 year ago
0.1.42
3 years ago
0.1.43
3 years ago
0.1.44
3 years ago
0.1.37
3 years ago
0.1.41
3 years ago
0.1.40
3 years ago
0.1.38
3 years ago
0.1.39
3 years ago
0.1.31
3 years ago
0.1.32
3 years ago
0.1.33
3 years ago
0.1.34
3 years ago
0.1.35
3 years ago
0.1.36
3 years ago
0.1.30
4 years ago
0.1.23
4 years ago
0.1.24
4 years ago
0.1.26
4 years ago
0.1.27
4 years ago
0.1.28
4 years ago
0.1.29
4 years ago
0.1.20
4 years ago
0.1.21
4 years ago
0.1.22
4 years ago
0.1.17
4 years ago
0.1.18
4 years ago
0.1.19
4 years ago
0.1.13
4 years ago
0.1.14
4 years ago
0.1.15
4 years ago
0.1.16
4 years ago
0.1.12
4 years ago
0.1.11
4 years ago