项目作者: limaofeng

项目描述 :
React Sortable
高级语言: TypeScript
项目地址: git://github.com/limaofeng/asany-sortable.git
创建时间: 2021-06-30T10:36:37Z
项目社区:https://github.com/limaofeng/asany-sortable

开源协议:MIT License

下载


AsanySortable

基于 React-Dnd 封装的拖拽排序组件

Install

  1. npm i @asany/sortable # or yarn add @asany/sortable

Usage

  1. const defaultStyle = {
  2. border: '1px dashed gray',
  3. padding: '0.5rem 1rem',
  4. marginBottom: '.5rem',
  5. marginRight: '.5rem',
  6. backgroundColor: 'white',
  7. };
  8. const SortItem = forwardRef(({ data, style, className }: SortableItemProps<any>, ref: any) => {
  9. return (
  10. <li
  11. className={className}
  12. style={{ ...defaultStyle, ...style }}
  13. ref={drag(ref)}
  14. >
  15. {data.name}
  16. </li>
  17. );
  18. }
  19. );
  20. const Example = () => {
  21. const [items, setItems] = useState([
  22. { id: '1', name: '小明', type: 'sortable-card' },
  23. { id: '2', name: '陈二', type: 'sortable-card' },
  24. { id: '3', name: '张三', type: 'sortable-card' },
  25. { id: '4', name: '李四', type: 'sortable-card' },
  26. { id: '5', name: '老五', type: 'sortable-card' },
  27. { id: '6', name: '赵六', type: 'sortable-card' },
  28. { id: '7', name: '王七', type: 'sortable-card' },
  29. ]);
  30. const handleChange = (data, event) => {
  31. setItems(data);
  32. };
  33. return (
  34. <DndProvider backend={HTML5Backend}>
  35. <AsanySortable
  36. accept={['sortable-card']}
  37. tag="ul"
  38. style={{ listStyle: 'none', padding: 0 }}
  39. items={items}
  40. onChange={handleChange}
  41. itemRender={SortItem}
  42. ></AsanySortable>
  43. </DndProvider>
  44. );
  45. };

Maintainers

@limaofeng.

License

MIT © 李茂峰