| 1 | # 拖拽 Dnd
|
| 2 |
|
| 3 | ## 何时使用
|
| 4 | 拖拽组件
|
| 5 |
|
| 6 | ## 如何使用
|
| 7 | ```
|
| 8 | import Dnd from 'bee-dnd';
|
| 9 | import 'bee-dnd/build/Dnd.css';
|
| 10 |
|
| 11 | ```
|
| 12 |
|
| 13 | ## 代码演示
|
| 14 |
|
| 15 | ## API
|
| 16 |
|
| 17 | ### 模块拖拽API
|
| 18 |
|
| 19 | |参数|说明|类型|默认值|
|
| 20 | |:---|:-----|:----|:------|
|
| 21 | |onStart|拖拽开始的钩子函数|function|-|
|
| 22 | |onDrag|拖拽中的钩子函数|function|-|
|
| 23 | |onStop|拖拽结束的钩子函数|function|-|
|
| 24 | |dragClass|拖拽元素的class|string|-|
|
| 25 | |dragingClass|拖拽中的class|string|-|
|
| 26 | |draggedClass|拖拽过后的class|string|-|
|
| 27 | |axis|设置可拖拽的方向|string|-|
|
| 28 | |handle|设置把手|string|-|
|
| 29 | |cancel|设置不可拖拽区域|string|-|
|
| 30 | |grid|设置每次拖拽移动的距离|array|-|
|
| 31 | |bounds|设置移动范围|object/string|-|
|
| 32 |
|
| 33 | ### 拖拽排序API
|
| 34 |
|
| 35 | |参数|说明|类型|默认值|
|
| 36 | |:---|:-----|:----|:------|
|
| 37 | |list|需要遍历的数组|array|[]|
|
| 38 | |onStart|拖拽开始的钩子函数|function|-|
|
| 39 | |onDragUpdate|拖拽中列表有更新时的钩子函数|function|-|
|
| 40 | |onStop|拖拽结束的钩子函数|function|-|
|
| 41 | |dropClass|拖动面板drop的class|string|-|
|
| 42 | |dropOverClass|拖动面板drop被经过的class|string|-|
|
| 43 | |dragClass|拖拽元素drag的class|string|-|
|
| 44 | |dragingClass|拖拽元素正在被拖拽的class|string|-|
|
| 45 | |type|设置拖拽列类型`vertical`单列纵向,`horizontal`单列横向,`betweenVertical`两列纵向,`betweenHorizontal`两列横向|`vertical`/`horizontal`/`betweenVertical`/`betweenHorizontal`|-|
|
| 46 | |otherList|`type=betweenVertical/betweenHorizontal`时需要的第二个数组|array|[]|
|
| 47 | |showKey|拖拽数组需要显示的`key`值，如 示例8|string|-|
|
| 48 |
|
| 49 |
|
| 50 | ### 拖拽排序回调函数参数说明
|
| 51 |
|
| 52 | - `destination` Draggable完成的位置。如果用户在不超过Droppable的情况下掉落，则目标将为空
|
| 53 |
|
| 54 | - `draggableId` 被拖动的Draggable的ID
|
| 55 |
|
| 56 | - `source` Draggable开始的位置
|
| 57 |
|
| 58 | ### 网格排序API
|
| 59 | #### Grid Layout Props
|
| 60 |
|
| 61 | |参数|说明|类型|默认值|
|
| 62 | |:---|:-----|:----|:------|
|
| 63 | |width|容器的初始宽度|number|-|
|
| 64 | |autoSize|如果为true，容器高度会膨胀并收缩以适合内容|boolean|-|
|
| 65 | |cols|此布局中的列数|number|12|
|
| 66 | |draggableCancel|用于不可拖动的标记的CSS选择器|string|''|
|
| 67 | |draggableHandle|用作标记的CSS选择器，用作可拖动句柄|string|''|
|
| 68 | |verticalCompact|如果为true，布局将垂直压缩|boolean|true|
|
| 69 | |compactType|压缩类型|（ ' vertical ' | ' horizontal '）|'vertical '|
|
| 70 | |layout|Layout是一个对象数组，格式为：`{x：number，y：number，w：number，h：number}`|number|-|
|
| 71 | |margin|各网格项之间的 margin，单位 px |[number, number]|[10, 10]|
|
| 72 | |containerPadding|容器内的padding，单位 px|[number, number]|[10, 10]|
|
| 73 | |rowHeight|静态行高|number|150|
|
| 74 | |isDraggable|是否可拖拽改变位置|boolean|true|
|
| 75 | |isResizable|是否可拖拽改变宽高|boolean|true|
|
| 76 | |useCSSTransforms|使用 CSS3 translate() 代替 position top/left |boolean|true|
|
| 77 | |preventCollision|如果为true，则拖动时网格项不会改变位置|boolean|false|
|
| 78 | |onLayoutChange|layout改变时触发的回调函数|function|(layout: Layout) => void|
|
| 79 | |onDragStart|拖拽开始的钩子函数|function|-|
|
| 80 | |onDrag|拖拽中的钩子函数|function|-|
|
| 81 | |onDragStop|拖拽结束的钩子函数|function|-|
|
| 82 | |onResizeStart|resize开始时的回调|function|-|
|
| 83 | |onResize|resize时的回调|function|-|
|
| 84 | |onResizeStop|resize结束时的回调|function|-|
|
| 85 |
|
| 86 | #### Grid Item Props
|
| 87 |
|
| 88 | |参数|说明|类型|默认值|
|
| 89 | |:---|:-----|:----|:------|
|
| 90 | |i|跟网格项组件关联的 key 值|string|-|
|
| 91 | |x|网格项在网格容器中的 x 坐标，单位：网格单元（非像素值）|number|-|
|
| 92 | |y|网格项在网格容器中的 y 单位：网格单元（非像素值）|number|-|
|
| 93 | |w|网格项的宽度，单位：网格单元（非像素值）|number|-|
|
| 94 | |h|网格项的高度，单位：网格单元（非像素值）|number|-|
|
| 95 | |minW|网格项的最小宽度|number|0|
|
| 96 | |maxW|网格项的最大宽度|number|Infinity|
|
| 97 | |minH|网格项的最小高度|number|0|
|
| 98 | |maxH|网格项的最大宽度|number|Infinity|
|
| 99 | |static|如果为 true，等同于 `isDraggable: false, isResizable: false`|boolean|false|
|
| 100 | |isDraggable|是否可拖拽|boolean|true|
|
| 101 | |isResizable|是否可拖拽改变大小|boolean|true|
|
| 102 |
|
| 103 | ## 注意事项
|
| 104 |
|
| 105 | 本组件提供四种使用方式，第一种：模块拖拽。第二种：拖拽排序，包括：横向排序、纵向排序、两个纵向交换、两个横向交换。第三种，自定义拖拽排序，可用 Dnd 组件内的 `DragDropContext, Droppable, Draggable`，并参考 [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)。第四种，网格排序，可参考 [react-grid-layout](https://github.com/STRML/react-grid-layout)。
|
| 106 |
|
| 107 | ## 更新日志 |
| \ | No newline at end of file |