React-beautiful-dnd 拖曳组件

程志新
2023-12-01

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必要的参数:组件IDstring
type可用于仅接受指定的类。总是从定义它们的继承type。 例如,如果您使用type=“person”,那么它将只允许将类型“person”的放到自身上。type=‘task’的将不能被拖放到type为‘person’的上。如果没有提供类型,它将被设置为“DEFAULT”。string
isDropDisabled一个控制列表中的所有拖放是否能够被组合的标志。它将默认为false。boolean
isCombineEnabled项目流动的方向。选项有 "vertical" (默认)和 "horizontal"boolean
direction允许您在<Droppable />上的任何位置放下string
ignoreContainerClippingboolean
modestandard (默认) 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>;

参数

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

子函数

<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当前拖动的模式
 类似资料: