| 1 | # Dnd
|
| 2 |
|
| 3 | ## 代码演示
|
| 4 |
|
| 5 | ## 模块拖拽API
|
| 6 |
|
| 7 | |参数|说明|类型|默认值|
|
| 8 | |:---|:-----|:----|:------|
|
| 9 | |onStart|拖拽开始的钩子函数|function|-|
|
| 10 | |onDrag|拖拽中的钩子函数|function|-|
|
| 11 | |onStop|拖拽结束的钩子函数|function|-|
|
| 12 | |dragClass|拖拽元素的class|string|-|
|
| 13 | |dragingClass|拖拽中的class|string|-|
|
| 14 | |draggedClass|拖拽过后的class|string|-|
|
| 15 | |axis|设置可拖拽的方向|string|-|
|
| 16 | |handle|设置把手|string|-|
|
| 17 | |cancel|设置不可拖拽区域|string|-|
|
| 18 | |grid|设置每次拖拽移动的距离|array|-|
|
| 19 | |bounds|设置移动范围|object/string|-|
|
| 20 |
|
| 21 | ## 拖拽排序API
|
| 22 |
|
| 23 | |参数|说明|类型|默认值|
|
| 24 | |:---|:-----|:----|:------|
|
| 25 | |list|需要遍历的数组|array|[]|
|
| 26 | |onStart|拖拽开始的钩子函数|function|-|
|
| 27 | |onDragUpdate|拖拽中列表有更新时的钩子函数|function|-|
|
| 28 | |onStop|拖拽结束的钩子函数|function|-|
|
| 29 | |dropClass|拖动面板drop的class|string|-|
|
| 30 | |dropOverClass|拖动面板drop被经过的class|string|-|
|
| 31 | |dragClass|拖拽元素drag的class|string|-|
|
| 32 | |dragingClass|拖拽元素正在被拖拽的class|string|-|
|
| 33 | |type|设置拖拽列类型`vertical`单列纵向,`horizontal`单列横向,`betweenVertical`两列纵向,`betweenHorizontal`两列横向|`vertical`/`horizontal`/`betweenVertical`/`betweenHorizontal`|-|
|
| 34 | |otherList|`type=betweenVertical/betweenHorizontal`时需要的第二个数组|array|[]|
|
| 35 | |showKey|拖拽数组需要显示的`key`值，如 示例8|string|-|
|
| 36 |
|
| 37 |
|
| 38 | ## 拖拽排序回调函数参数说明
|
| 39 |
|
| 40 | - `destination` Draggable完成的位置。如果用户在不超过Droppable的情况下掉落，则目标将为空
|
| 41 | - `draggableId` 被拖动的Draggable的ID
|
| 42 | - `source` Draggable开始的位置
|
| 43 |
|
| 44 |
|
| 45 |
|
| 46 |
|
| 47 | ## 说明
|
| 48 |
|
| 49 | > 本组件提供三种使用方式，第一种：模块拖拽。第二种：拖拽排序，包括：横向排序、纵向排序、两个纵向交换、两个横向交换。第三种，更复杂的拖拽排序，可用 Dnd 组件内的 `DragDropContext, Droppable, Draggable`，并参考 [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)。
|