https://github.com/limaofeng/asany-sortable
React Sortable
https://github.com/limaofeng/asany-sortable
react react-dnd sortable
Last synced: 5 months ago
JSON representation
React Sortable
- Host: GitHub
- URL: https://github.com/limaofeng/asany-sortable
- Owner: limaofeng
- License: mit
- Created: 2021-06-30T10:36:37.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T08:17:30.000Z (almost 2 years ago)
- Last Synced: 2025-08-09T01:41:34.773Z (6 months ago)
- Topics: react, react-dnd, sortable
- Language: TypeScript
- Homepage: https://limaofeng.github.io/asany-sortable/
- Size: 4.07 MB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# AsanySortable
基于 React-Dnd 封装的拖拽排序组件
## Install
```bash
npm i @asany/sortable # or yarn add @asany/sortable
```
## Usage
```tsx
const defaultStyle = {
border: '1px dashed gray',
padding: '0.5rem 1rem',
marginBottom: '.5rem',
marginRight: '.5rem',
backgroundColor: 'white',
};
const SortItem = forwardRef(({ data, style, className }: SortableItemProps, ref: any) => {
return (
{data.name}
);
}
);
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 (
);
};
```
## Maintainers
[@limaofeng](https://github.com/limaofeng).
## License
[MIT](LICENSE) © 李茂峰