1.简介
react-beautiful-dnd基于react的一个组件库,主要包含三个组件.
- DragDropContext : 用于包装拖拽根组件，Draggable和Droppable都需要包裹在DragDropContext内
- Droppable 用于包装你需要拖动的组件，使组件能够被拖拽（make it draggable）
- Draggable 用于包装接收拖拽元素的组件，使组件能够放置（dropped on it）
2.DragDropContext
为了使用拖放功能，您需要将React希望使用拖放功能的树的部分包装在中。建议仅将整个应用程序包装在。**有嵌套的是不支持的。**您将能够达到你想要的条件拖放使用的道具和。您可以认为其目的与react-redux Provider组件相似。如果提供，则将内容安全保护随机数属性添加到注入的样式标签中。
2.1 使用及Api
import React from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
class App extends React.Component {
// 在捕获之前
const onBeforeCapture = () => {};
// 在拖动开始之前
const onBeforeDragStart = () => {};
// 在拖动开始时
const onDragStart = () => {};
// 在拖动变化时
const onDragUpdate = () => {};
// 在拖动结束时
const onDragEnd = () => {};
render() {
return (
<DragDropContext
onBeforeCapture={onBeforeCapture}
onBeforeDragStart={onBeforeDragStart}
onDragStart={onDragStart}
onDragUpdate={onDragUpdate}
onDragEnd={onDragEnd}
>
<div>Hello world</div>
</DragDropContext>
);
}
}
2.2 总结
- 是总体的包装
- 用于包装拖拽根组件，Draggable和Droppable都需要包裹在DragDropContex内
- 不支持嵌套
- 必须设置的onDragEnd钩子函数(拖拽后的数组重新排序操作在这里进行)
3.Droppable
<Droppable />用于包装你需要拖动的组件，使组件能够被拖拽.
3.1 使用
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>;
3.2 参数说明
- droppableId: 必要的参数
- type: 可用于仅接受指定的类。总是从定义它们的继承type。 例如，如果您使用type=“person”，那么它将只允许将类型“person”的放到自身上。type=‘task’的将不能被拖放到type为‘person’的上。如果没有提供类型，它将被设置为“DEFAULT”。
- isDropDisabled: 一个控制列表中的所有拖放是否能够被组合的标志。它将默认为false。
- direction : 项目流动的方向。选项有 "vertical" (默认)和 "horizontal"。
- ignoreContainerClipping : 当在一个可滚动容器内，它的区域是受限制的，所以你只能在的部分上，你可以看到。设置此道具可以避免这种行为，允许您在上的任何位置放下，即使它在视觉上被可滚动的父元素隐藏。默认的行为适用于大多数情况，所以你可能永远不需要使用这个道具，但是如果你有很长的在一个短滚动容器中，它会很有用。请记住，如果在同一页面上的滚动容器中有多个，则可能会导致一些意想不到的行为。
- mode : standard (默认) or virtual。 用于将列表指定为虚拟列表。虚拟列表模式详情参考官方文档。
- renderClone : 用于在发生拖拽时渲染拖拽<可拖拽/>的克隆(替换)。有关使用细节，请参阅我们的reparenting指南。虚拟列表必须使用克隆。您可以不使用虚拟列表而使用克隆
- getContainerForClone : 在拖动过程中返回克隆的包含元素(父元素)的函数。
3.3 Droppable的子函数
<Droppable />的React子节点必须是返回react元素的函数。
<Droppable droppableId="droppable-1">
{(provided, snapshot) => ({
/*...*/
})}
</Droppable>
3.3.1 参数说明
- provided.innerRef : 为了使droppable正确运行，您必须绑定所提供的。innerRef指向ReactElement中尽可能高的DOM节点。这样做是为了避免使用ReactDOM查找DOM节点。
- provided.placeholder :用于在拖动过程中根据需要在< Droppable />中创建空格。当用户拖动非主列表的列表时，需要此空间。请确保将占位符放在您提供ref的组件中。我们需要增加本身的大小。
- provided.droppableProps (DroppableProps) :这是一个包含需要应用于可删除元素的属性的对象。它需要应用到与应用provided.innerRef相同的元素。它目前包含用于样式化和查找的数据属性。
- snapshot内有拖拽的状态，可以改变外观
<Droppable droppableId="droppable-1">
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.droppableProps} style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}>
Good to go
{provided.placeholder}
</div>
)}
</Droppable>
3.2 总结
<Droppable />可以作为<Draggable />和<DragDropContext />的子组件。<Draggable />必须包含在<Droppable />中，即<Draggable />只能作为<Droppable />的子组件
4.Draggable
-
<Draggable />用于包装接收拖拽元素的组件，使组件能够放置. -
<Draggable />组件可以被拖放到上。<Draggable />必须始终包含在< drop ppable />中。可以对一个<Draggable />在其父<Droppable />内重新排序，或者移动到另一个<Droppable />。这是可能的，因为可以自由地控制它允许什么被丢弃在它上面。 -
每个
<Draggable />都有一个拖动句柄。拖动句柄是用户为了拖动<Draggable />而与之交互的元素。一个拖动句柄可以是<Draggable />元素本身，或者是<Draggable />的子元素。注意，默认情况下，拖放句柄不能是交互元素，因为事件处理程序在嵌套的交互元素上被阻塞。将可访问性的适当语义添加到拖动句柄元素中。如果您希望使用交互式元素，必须设置disableInteractiveElementBlocking。
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>;
4.1 参数说明
- draggableId : 必传，一个_需要_DraggableId(string)唯一标识的Draggable为应用程序. 请不要更改 Props - 特别是在拖动时
- index: 必传，一个需要number它与Draggable的顺序相匹配在Droppable里面. 它只是简单的索引Draggable在列表中. 该index在一个内部需要是唯一的Droppable, 但不需要是唯一的Droppables. 通常情况下index价值将是简单的index由Array.prototype.map函数提供; 必须唯一;必须连续。[0,1,2]而不是[1,2,8]
- isDragDisabled: 默认false，一个可选标志，用于控制是否允许Draggable拖动
- disableInteractiveElementBlocking: 选择退出以阻止来自交互式元素的拖动的标志。欲了解更多信息，请参阅节内的交互式子元素
<Draggable /> - shouldRespectForcePress :拖动手柄是否应遵守强制按动交互。请参阅强制按下。
4.2 draggable的子函数
<Draggable draggableId="draggable-1" index={0}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
Drag me!
</div>
)}
</Draggable>
4.2.1 参数说明
- provided.innerRef (innerRef: (HTMLElement) => void):为了使正确运行，必须将innerRef函数绑定到ReactElement，您希望将其视为节点。这样做是为了避免使用ReactDOM查找DOM节点。
- provided.draggableProps: 这是一个包含数据属性和内联样式的对象。此对象需要应用于将innerRef应用于的同一节点。它控制可拖动控件在拖动和不拖动时的移动。欢迎您添加自己的样式到DraggableProps-style -但请不要删除或替换任何属性。
- provided.dragHandleProps: 这是用来拖动整个
<Draggable />的。这个节点通常与<Draggable />相同，但有时也可能是<Draggable />的子节点。拖柄道具需要应用到您想要作为拖柄的节点。这是一些需要应用到<Draggable />节点的道具。最简单的方法是将道具分散到可拖动节点上({…provider . draghandleprops})。但是，如果你还需要回复他们，也欢迎你给这些道具打补丁。当isDragDisabled被设置为true时，DragHandleProps将为null。 - snapshot内有拖拽的状态，可以改变外观
<Draggable draggableId="draggable-1" index={0}>
{(provided, snapshot) => {
const style = {
backgroundColor: snapshot.isDragging ? 'blue' : 'grey',
...provided.draggableProps.style,
};
return (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={style}
>
Drag me!
</div>
);
}}
</Draggable>
