> For the complete documentation index, see [llms.txt](https://ddzy.gitbook.io/ts-utility-plugins-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ddzy.gitbook.io/ts-utility-plugins-docs/business/business-draggable/sort-draggable.md).

# 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    |