-
组件布局 Layout视图 View导航 Navigation反馈 Feedback
拖拽 Dndissue v2.0.1- v3.0.1
- v3.0.0
- v2.0.1
- v2.0.0
- v1.1.5
- v1.1.4
- v1.1.3
- v1.1.2
- v1.1.1
- v1.1.0
- v1.0.7
- v1.0.6
- v1.0.5
- v1.0.4
- v1.0.3
- v1.0.2
- v1.0.1
- v3.0.1
- v3.0.0
- v2.0.1
- v2.0.0
- v1.1.5
- v1.1.4
- v1.1.3
- v1.1.2
- v1.1.1
- v1.1.0
- v1.0.7
- v1.0.6
- v1.0.5
- v1.0.4
- v1.0.3
- v1.0.2
- v1.0.1
何时使用
拖拽组件
如何使用
import Dnd from 'bee-dnd';
import 'bee-dnd/build/Dnd.css';
能力特性
API
模块拖拽API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
onStart | 拖拽开始的钩子函数 | function | - |
onDrag | 拖拽中的钩子函数 | function | - |
onStop | 拖拽结束的钩子函数 | function | - |
dragClass | 拖拽元素的class | string | - |
dragingClass | 拖拽中的class | string | - |
draggedClass | 拖拽过后的class | string | - |
axis | 设置可拖拽的方向 | string | - |
handle | 设置把手 | string | - |
cancel | 设置不可拖拽区域 | string | - |
grid | 设置每次拖拽移动的距离 | array | - |
bounds | 设置移动范围 | object/string | - |
拖拽排序API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
list | 需要遍历的数组 | array | [] |
onStart | 拖拽开始的钩子函数 | function | - |
onDragUpdate | 拖拽中列表有更新时的钩子函数 | function | - |
onStop | 拖拽结束的钩子函数 | function | - |
dropClass | 拖动面板drop的class | string | - |
dropOverClass | 拖动面板drop被经过的class | string | - |
dragClass | 拖拽元素drag的class | string | - |
dragingClass | 拖拽元素正在被拖拽的class | string | - |
type | 设置拖拽列类型vertical 单列纵向,horizontal 单列横向,betweenVertical 两列纵向,betweenHorizontal 两列横向 |
vertical /horizontal /betweenVertical /betweenHorizontal |
- |
otherList | type=betweenVertical/betweenHorizontal 时需要的第二个数组 |
array | [] |
showKey | 拖拽数组需要显示的key 值,如 示例8 |
string | - |
拖拽排序回调函数参数说明
destination
Draggable完成的位置。如果用户在不超过Droppable的情况下掉落,则目标将为空draggableId
被拖动的Draggable的IDsource
Draggable开始的位置
网格排序API
Grid Layout Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 容器的初始宽度 | number | - |
autoSize | 如果为true,容器高度会膨胀并收缩以适合内容 | boolean | - |
cols | 此布局中的列数 | number | 12 |
draggableCancel | 用于不可拖动的标记的CSS选择器 | string | '' |
draggableHandle | 用作标记的CSS选择器,用作可拖动句柄 | string | '' |
verticalCompact | 如果为true,布局将垂直压缩 | boolean | true |
compactType | 压缩类型 | ( ' vertical ' | ' horizontal ') |
layout | Layout是一个对象数组,格式为:{x:number,y:number,w:number,h:number} |
number | - |
margin | 各网格项之间的 margin,单位 px | [number, number] | [10, 10] |
containerPadding | 容器内的padding,单位 px | [number, number] | [10, 10] |
rowHeight | 静态行高 | number | 150 |
isDraggable | 是否可拖拽改变位置 | boolean | true |
isResizable | 是否可拖拽改变宽高 | boolean | true |
useCSSTransforms | 使用 CSS3 translate() 代替 position top/left | boolean | true |
preventCollision | 如果为true,则拖动时网格项不会改变位置 | boolean | false |
onLayoutChange | layout改变时触发的回调函数 | function | (layout: Layout) => void |
onDragStart | 拖拽开始的钩子函数 | function | - |
onDrag | 拖拽中的钩子函数 | function | - |
onDragStop | 拖拽结束的钩子函数 | function | - |
onResizeStart | resize开始时的回调 | function | - |
onResize | resize时的回调 | function | - |
onResizeStop | resize结束时的回调 | function | - |
Grid Item Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
i | 跟网格项组件关联的 key 值 | string | - |
x | 网格项在网格容器中的 x 坐标,单位:网格单元(非像素值) | number | - |
y | 网格项在网格容器中的 y 单位:网格单元(非像素值) | number | - |
w | 网格项的宽度,单位:网格单元(非像素值) | number | - |
h | 网格项的高度,单位:网格单元(非像素值) | number | - |
minW | 网格项的最小宽度 | number | 0 |
maxW | 网格项的最大宽度 | number | Infinity |
minH | 网格项的最小高度 | number | 0 |
maxH | 网格项的最大宽度 | number | Infinity |
static | 如果为 true,等同于 isDraggable: false, isResizable: false |
boolean | false |
isDraggable | 是否可拖拽 | boolean | true |
isResizable | 是否可拖拽改变大小 | boolean | true |
注意事项
本组件提供四种使用方式,第一种:模块拖拽。第二种:拖拽排序,包括:横向排序、纵向排序、两个纵向交换、两个横向交换。第三种,自定义拖拽排序,可用 Dnd 组件内的 DragDropContext, Droppable, Draggable
,并参考 react-beautiful-dnd。第四种,网格排序,可参考 react-grid-layout。
更新日志
-
v2.0.0 2019-08-22 ( release地址 )
- bee-dnd @2.0.0
- [Update]升级 react-beautiful-dnd 版本,draggableId 改为字符串。
- bee-dnd @2.0.0
-
v1.1.4 2019-08-21 ( release地址 )
- bee-dnd @1.1.4
- [Update]升级 react-beautiful-dnd 版本,draggableId 改为字符串。
- bee-dnd @1.1.4
-
v1.1.3 2019-07-26 ( release地址 )
- bee-dnd @1.1.3
- [Feature]新增网格排序,解决模态框里不能使用拖拽排序的问题。
- [Fixbug]解决列表拖拽被遮挡的问题。
- bee-dnd @1.1.3
-
v1.1.2 2019-03-22 ( release地址 )
- [Feature]bee-dnd @1.1.2,文字颜色规范为#212121
-
v1.1.1 2019-03-22 ( release地址 )
- [Fixbug]bee-dnd @1.1.1,解决拖动到不同容器时,样式未保持在拖动样式的问题