# sort-draggable

### 说明

拖放排序组件

### 演示

{% embed url="<https://codesandbox.io/s/businessdraggable-74zlf>" %}

### 源码

<https://github.com/ddzy/ts-utility-plugins/tree/master/src/ddzy/business/draggable/sort-draggable>

### 配置

| Name                  | Type                                                                      | Description | Required |
| --------------------- | ------------------------------------------------------------------------- | ----------- | -------- |
| container             | string                                                                    | 挂载到的 DOM 容器 | true     |
| dataSource            | <p>Array<{</p><p>  titleText?: string; contentText?: string;</p><p>}></p> | 数据源         | false    |
| animate               | boolean                                                                   | 是否开启拖拽动画    | false    |
| dragWrapperStyle      | object                                                                    | 拖拽容器的样式     | false    |
| dragOriginStyle       | object                                                                    | 拖拽对象的默认样式   | false    |
| dragOriginActiveStyle | object                                                                    | 拖拽对象被拖拽时的样式 | false    |
| dragTargetActiveStyle | object                                                                    | 交换目标的活跃样式   | false    |
| onDragStartHook       | (origin: HTMLElement) => void                                             | \*          | false    |
| onDragEnterHook       | (origin: HTMLElement) => void                                             | \*          | false    |
| onDragLeaveHook       | (origin: HTMLElement) => void                                             | \*          | false    |
| onDragOverHook        | (origin: HTMLElement) => void                                             | \*          | false    |
| onDropHook            | (origin: HTMLElement) => void                                             | \*          | false    |