react + ts + react-beautiful-dnd使用

react-beautiful-dnd --=- 新版拖拽组件

最近项目需求，开始玩起react。 一遍遍骂自己太菜，一遍遍告诉自己老子最棒! 这项目有个需求是拖动，本以为拖动能有多难，插件满天飞，不在怕的，but， 现实告诉我那必不可能，那需求是真麻烦噢！

选来选去，最后选择了这个 react-beautiful-dnd 插件

但发现这个插件的文档是真的简洁噢。没办法，自己摸索吧，根据我自己摸得，我现在整理了一下使用方法，给以后的人使用点个灯点个灯！哈哈哈

play demo


git地址


官方demo
demo程序启动执行命令： yarn storybook

API

名称	中文名	作用
DragDropContext	拖拽上下文	包装拖拽根组件，Draggable和Droppable都需要包裹在内
Droppable	可放置组件	包装你需要拖动的组件，使组件能够被拖拽（包裹可放置组件)
Draggable	拖拽上下文	包装接收拖拽元素的组件，使组件能够放置(包裹可拖拽组件)

Droppable参数

字段	含义
droppableId	唯一标识id,必要的参数
isDropDisabled	一个控制列表中的所有拖放是否能够被组合的标志。它将默认为false
direction	项目流动的方向。选项有 "vertical" (默认)和 "horizontal"
ignoreContainerClipping	当< Droggable />在一个可滚动容器内，它的区域是受限制的, 所以你只能在< Droggable />的部分上看到。 设置此道具可以避免这种行为，允许您在< Droggable />上的任何位置放下，即使它在视觉上被可滚动的父元素隐藏。默认的行为适用于大多数情况，所以你可能永远不需要使用这个道具， 但是如果你有很长的< Droggable />在一个短滚动容器中，它会很有用。请记住，如果在同一页面上的滚动容器中有多个< Droggable />，则可能会导致一些意想不到的行为。

Draggable参数

字段	含义
draggableId	拖拽源头 (唯一标识)
index	它与Draggable的顺序相匹配在Droppable里面. 它只是简单的索引
isDragDisabled	默认false，一个可选标志，用于控制是否允许Draggable拖动
source	可放置组件
source.index	拖拽index下标
destination	当前目标位置（目的地)
destination.index	位于可扔的index下标

Draggable子函数的provided参数

字段	含义
provided.innerRef	innerRef:获取ref funtion组件是ref，class组件是innerRef 为了使< Draggable />正确运行，必须将innerRef函数绑定到ReactElement，您希望将其视为< Draggable />节点。这样做是为了避免使用ReactDOM查找DOM节点
provided.draggableProps	一个包含数据属性和内联样式的对象。 此对象需要应用于将innerRef应用于的同一节点。 它控制可拖动控件在拖动和不拖动时的移动。 欢迎您添加自己的样式到DraggableProps-style -但请不要删除或替换任何属性
iprovided.dragHandleProps	用来拖动整个< Draggable />的。绑定在真正想要拖拽的组件上, 此时我们需要做一个可拖拽排序的列表，(比如顶图所演示的) 但只能拖拽左上角的人头，其他的地方不拖拽，那只需要在想要拖拽的组件上添加上{...provided.dragHandleProps}即可
placeholder	占位符，放置在function根节点内部的最下面

Draggable子函数的snapshot参数：此为快照

// snapshot in <Draggable/>
const draggableSnapShot = {
  isDragging: true,
  draggingOver: 'column1'		// 拖拽穿过的可放置组件id即 droppableId
}

// snapshot in <Droppable/>
const droppableSnapShot = {
  isDraggingOver: true,
  draggingOverWith: 'task1'	// 正被拖拽穿过我的拖拽组件id即 draggableId
}


对于可拖拽的组件来说，它被拖拽时关心的是经过了哪些被放置的组件

对于可放置的组件来说，它关心的是经过了哪些可拖拽组件被拖拽经过

如果还不能理解
那么我下面写的demo
你多看几遍尝试一下就理解了

我把demo单独放到另一篇
闪送去DEMO