拖拽 Dnd
issue

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

何时使用

拖拽组件

如何使用

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的ID
source 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 改为字符串。

v1.1.4 2019-08-21 ( release地址 )


bee-dnd @1.1.4
[Update]升级 react-beautiful-dnd 版本，draggableId 改为字符串。

v1.1.3 2019-07-26 ( release地址 )


bee-dnd @1.1.3
[Feature]新增网格排序，解决模态框里不能使用拖拽排序的问题。
[Fixbug]解决列表拖拽被遮挡的问题。

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，解决拖动到不同容器时，样式未保持在拖动样式的问题

v1.1.0 2019-03-20 ( release地址 )

bee-dnd v1.1.0升级内容

[Feature]bee-dnd @1.1.0，按UI规范优化组件交互效果

何时使用

如何使用

能力特性

基础拖拽
单个元素沿x轴y轴拖拽
设置元素不可拖拽
单个元素拖拽把手
每次拖拽移动距离
元素拖拽范围
在指定容器中拖拽
数据集合拖拽列表排序
DOM集合拖拽列表排序
横向拖拽列表排序
两列纵向拖拽
两列横向拖拽
网格排序

模块拖拽API
拖拽排序API
拖拽排序回调函数参数说明
网格排序API

注意事项

更新日志

拖拽 Dndissue v2.0.1v3.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