React-beautiful-dnd 拖曳组件

React-beautiful-dnd 拖曳组件

是一个支持react的第三方的拖曳组件

DragDropContext 拖曳根容器

用于包裹draggable和droppable的容器组件

拖曳的生命周期钩子函数都在该容器组件上

• onBeforeCapture 拖动目标捕获之前
• onBeforeDragStart 拖动开始之前事件
• onDragStart 拖动开始事件
• onDragUpdate 拖动中事件
• onDragEnd 拖动结束事件

注意：必须要onDragEnd 事件，不能自己嵌套自己

Droppable 拖动存放组件

用于包装你需要拖动的Draggable组件，使组件能够被拖拽.

语法格式

import { Droppable } from 'react-beautiful-dnd';

<Droppable droppableId="droppable-1" type="PERSON">
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
      {...provided.droppableProps}
    >
      <h2>I am a droppable!</h2>
      {provided.placeholder}
    </div>
  )}
</Droppable>;

参数

参数	作用	是否必传	数据类型
droppableId	必要的参数：组件ID	是	string
type	可用于仅接受指定的类。总是从定义它们的继承type。 例如，如果您使用type=“person”，那么它将只允许将类型“person”的放到自身上。type=‘task’的将不能被拖放到type为‘person’的上。如果没有提供类型，它将被设置为“DEFAULT”。	否	string
isDropDisabled	一个控制列表中的所有拖放是否能够被组合的标志。它将默认为false。	否	boolean
isCombineEnabled	项目流动的方向。选项有 "vertical" (默认)和 "horizontal"	否	boolean
direction	允许您在<Droppable />上的任何位置放下	否	string
ignoreContainerClipping		否	boolean
mode	standard (默认) or virtual。 用于将列表指定为虚拟列表。虚拟列表模式详情参考官方文档	否
renderClone	用于在发生拖拽时渲染拖拽<可拖拽/>的克隆(替换)。有关使用细节，请参阅我们的reparenting指南。虚拟列表必须使用克隆。您可以不使用虚拟列表而使用克隆	否
getContainerForClone	在拖动过程中返回克隆的包含元素(父元素)的函数	否

子函数

格式：

(provided,snapshot) => (
	<div
        ref={provided.innerRef}
        {...provided.droppableProps}
    >
        Hello world
        {provided.placeholder}
    </div>
)

provided 参数

provided.innerRef :

为了使droppable正确运行，您必须绑定所提供的。innerRef指向ReactElement中尽可能高的DOM节点。这样做是为了避免使用ReactDOM查找DOM节点。

provided.placeholder :

用于在拖动过程中根据需要在< Droppable />中创建空格。当用户拖动非主列表的列表时，需要此空间。请确保将占位符放在您提供ref的组件中。我们需要增加本身的大小。

provided.droppableProps (DroppableProps) :

这是一个包含需要应用于可删除元素的属性的对象。它需要应用到与应用provided.innerRef相同的元素。它目前包含用于样式化和查找的数据属性。

snapshot参数

用于获得拖动临时的快照

参数	作用
isDraggingOver: boolean	拖动是否结束
draggingOverWith: ?DraggableId	拖曳结束在哪
draggingFromThisWith: ?DraggableId	从哪里开始拖曳
isUsingPlaceholder: boolean	是否使用占位符

注意

• <Droppable />可以作为<Draggable />和<DragDropContext />的子组件。
• <Draggable />必须包含在<Droppable />中，即<Draggable />只能作为<Droppable />的子组件

Draggable 拖动组件

<Draggable /> -用于包装需要拖曳的组件，使组件能够放置

语法格式

import { Draggable } from 'react-beautiful-dnd';

<Draggable draggableId="draggable-1" index={0}>
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
    >
      <h4>My draggable</h4>
    </div>
  )}
</Draggable>;

参数

参数	是否必填	数据类型	作用
draggableId	是	string	唯一拖动标识
index	是	string	Draggable在列表中的索引(必须唯一;必须连续)
isDragDisabled	否	boolean	默认false，一个可选标志，用于控制是否允许Draggable拖动
disableInteractiveElementBlocking	否	boolean	选择退出以阻止来自交互式元素的拖动的标志
shouldRespectForcePress	否	boolean	拖动手柄是否应遵守强制按动交互

子函数

<Draggable/>的React子节点必须是返回react元素的函数。

语法格式

<Draggable draggableId="draggable-1" index={0}>
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      {...provided.draggableProps}
      {...provided.dragHandleProps}
    >
      Drag me!
    </div>
  )}
</Draggable>

provided参数

provided.innerRef
provided.draggableProps
provided.dragHandleProps

snapshot参数

参数	作用
isDragging: boolean	是否在拖动
isDropAnimating: boolean	是否在拖动动画
dropAnimation: ?DropAnimation	拖动动画信息
draggingOver: ?DroppableId
combineWith: ?DraggableId	您要结合的可拖动对象的 id
mode: ?MovementMode	当前拖动的模式