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) => (<divref={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) => (<divref={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) => (<divref={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) => (<divref={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	当前拖动的模式

React-beautiful-dnd 拖曳组件相关推荐

React 项目---class 创建组件 (11)
回顾 function 创建组件在前面的学习中,我们已经介绍了一种方法来创建组件利用function,这里我们一起来回顾一下 function Hello(props){return <di ...
React后台管理系统-file-uploader组件
1.React文件上传组件github地址: https://github.com/SoAanyip/React-FileUpload 2.Util里边新建file-uploader文件夹,里边新建i ...
如何在React中从其父组件更改子组件的状态
by Johny Thomas 约翰尼·托马斯(Johny Thomas) 如何在React中从其父组件更改子组件的状态 (How to change the state of a child com ...
[react] 在react中怎样改变组件状态，以及状态改变的过程是什么？
[react] 在react中怎样改变组件状态,以及状态改变的过程是什么? 使用this.setState改变组件的状态改变的过程中,React Fiber Reconciler遍历了整个Fiber ...
[react] react怎么拿到组件对应的DOM元素？
[react] react怎么拿到组件对应的DOM元素? 在Class组件中 import React from 'react'; class CComponent extends React.Com ...
[react] 描述下在react中无状态组件和有状态组件的区别是什么？
[react] 描述下在react中无状态组件和有状态组件的区别是什么? 1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板 ...
[react] 写一个react的高阶组件并说明你对高阶组件的理解
[react] 写一个react的高阶组件并说明你对高阶组件的理解定义高阶组件 import React, { Component } from 'react';const simpleHoc = ...
[react] 在react中无状态组件有什么运用场景
[react] 在react中无状态组件有什么运用场景适用于逻辑简单的纯展示的场景,如资料卡片等个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
[react] 使用高阶组件(HOC)实现一个loading组件
[react] 使用高阶组件(HOC)实现一个loading组件 function HOC(wrappedComponent) {return class extends React.Componen ...

React-beautiful-dnd 拖曳组件

React-beautiful-dnd 拖曳组件

DragDropContext 拖曳根容器

Droppable 拖动存放组件

语法格式

参数

子函数

格式：

provided 参数

snapshot参数

注意

Draggable 拖动组件

语法格式

参数

子函数

语法格式

provided参数

snapshot参数

React-beautiful-dnd 拖曳组件相关推荐

最新文章

热门文章