# Sortable 拖拽

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/sortable/freepass)
- 平台：PC
- 维护者：屈正巍
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Sortable]

## 代码演示

### 基础用法

通过设置 ref 开启拖拽功能。

```jsx
import React from 'react';
import { Sortable } from '@weapp/ui';

class SortableDemo extends React.Component {
  listContianer = React.createRef<HTMLDivElement>();
  sortNewInstance: any;
  componentDidMount() {
    const container = this.listContianer?.current;
    const options = {
      animation: 150,
      onEnd: (evt: any) => {
        console.log(evt)
      }
    };
    if (container) {
      Sortable().then(Instance => {
        this.sortNewInstance = new Instance.default(container, options);
      });
    }
  }
  componentWillUnmount() {
    this.sortNewInstance?.destroy();
    this.sortNewInstance = null;
  }

  render() {
    return (
      <div ref={this.listContianer}>
        <h2>111</h2>
        <h2>222</h2>
        <h2>333</h2>
        <h2>444</h2>
        <h2>555</h2>
      </div>
    )
  }
}

export default SortableDemo;
```

## API

### 注意：

```typescript
在火狐浏览器中拖拽排序会打开新的页签的处理方法
container.ondrop = function (event) {
          event.preventDefault();
          event.stopPropagation();
        }
```

参考:[http://www.sortablejs.com/options.html](http://www.sortablejs.com/options.html)
