0.1.45 • Published 1 year ago

@asany/sortable v0.1.45

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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

@limaofeng.

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