# sortable-gggso

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

Latest version **0.1.43** (published 2022-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install sortable-gggso
pnpm add sortable-gggso
yarn add sortable-gggso
bun add sortable-gggso
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.43 |
| Published | 2022-03-02 |
| First published | 2022-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 675 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | 李茂峰 |
| Maintainers | gggso |

## Links

- npm: https://www.npmjs.com/package/sortable-gggso
- Repository: https://github.com/limaofeng/asany-sortable
- Homepage: https://github.com/limaofeng/asany-sortable#readme
- Issues: https://github.com/limaofeng/asany-sortable/issues
- npm.io page: https://npm.io/package/sortable-gggso

## Dependencies (3)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [react-flip-toolkit](https://npm.io/package/react-flip-toolkit.md) ^7.0.13
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^3.1.1

## Recent versions

- 0.1.43 (latest) — 2022-03-02
- 0.1.42 — 2022-03-02
- 0.1.41 — 2022-03-02
- 0.1.40 — 2022-03-02
- 0.1.30 — 2022-03-02

## README

# AsanySortable

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

修改 SortableContainer 拖拽状态 class名为 isDragging 未拖拽为 noDragging 移除写死背景色

## 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<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](https://github.com/limaofeng).

## License

[MIT](LICENSE) © 李茂峰

---
_Source: https://npm.io/package/sortable-gggso · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._