使用react-beautiful-dnd实现列表间拖拽排序功能
基本概念
DragDropContext：用于包装拖拽根组件,构建一个可以拖拽的范围,Draggable和Droppable都需要包裹在DragDropContext内,不支持嵌套
Droppable：用于包装接收拖拽元素的组件,使被拖动元素可以放置该区域
Draggalbe：用于包装你需要拖动的组件,使组件能够被拖拽
使用方法
1、在项目 package.json 添加相应版本号
"react-beautiful-dnd": "^10.0.3"
2、把你想能够拖放的代码放到DragDropContext中
import React from 'react';
import {DragDropContext} from 'react-beautiful-dnd';
class App extends React.Component {
//在捕获之前
onBeforeCapture = () => {
/*...*/
};
//在拖动开始之前
onBeforeDragStart = () => {
/*...*/
};
//在拖动开始时
onDragStart = () => {
/*...*/
};
//在拖动变化时
onDragUpdate = () => {
/*...*/
};
//在拖动结束时
onDragEnd = result => {
console.log(result);
};
render() {
return (
Hello world
);
}
}
export default App;3、确定可放置区域Dropppable
import React from 'react';
import {DragDropContext,Droppable} from 'react-beautiful-dnd';
class App extends React.Component {
// ...
getDroppableStyle = snapshot => ({
//backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey';
});
render() {
return (
{(provided, snapshot) => (
I am a droppable!
{provided.placeholder}
)}
);
}
}
export default App;droppableId：必要的参数(字符串),用于唯一标识,不要更改此ID,特别是在拖动时
type: 可用于仅接受指定的类。例如：如果您使用type=“person”，那么它将只允许将类型“person”的放到自身上。type=‘task’的将不能被拖放到type为‘person’的上。如果没有提供类型，它将被设置为“DEFAULT”。
direction : 项目流动的方向。选项有 "vertical" (默认)和 "horizontal"。
isDropDisabled：用来确定该区域是否可放置元素,默认为false。true:不可放置,false:可以放置
其下钩子函数参数使用说明：
provided.innerRef：为了使droppable正确运行，您必须绑定所提供的。innerRef指向ReactElement中尽可能高的DOM节点。这样做是为了避免使用ReactDOM查找DOM节点。
provided.droppableProps：这是一个包含需要应用于可删除元素的属性的对象。它需要应用到与应用provided.innerRef相同的元素。它目前包含用于样式化和查找的数据属性。
provided.placeholder: 用于在拖动过程中根据需要在< Droppable />中创建空格。当用户拖动非主列表的列表时，需要此空间。请确保将占位符放在您提供ref的组件中。我们需要增加本身的大小。
snapshot：当前拖动状态,可以用来在被拖动时改变Droppable的外观,snapshot.isDraggingOver:是否拖动结束
4、在Dropppable区域使用Draggable包裹拖拽元素
import React from 'react';
import {DragDropContext,Droppable,Draggable} from 'react-beautiful-dnd';
class App extends React.Component {
// ...
render() {
return (
{(provided, snapshot) => (
{(provided, snapshot) => (
My draggable
)}
{provided.placeholder}
)}
);
}
}
export default App;
droppableId：必要的参数(字符串),用于唯一标识,不要更改此ID特别是在拖动时
index：number类型，必须唯一，必须连续
isDragDisabled:用来确定该元素是否可以被拖动,true:不可拖动,false:可以拖动
5、拖拽结束时，改变源数据
onDragEnd = result => {
const {source, destination, draggableId} = result;
//不在拖动范围内则视为没有进行拖动操作
if (!destination) {
return;
}
//将拖拽元素从源数组中删除，再插入到目标数组中
// let now_userList = Array.from(this.state.userList);
// const [removed] = now_userList.splice(source.index,1);
// now_userList.splice(destination.index,0,removed);
// //更新数据源
// this.setState({
// userList:now_userList
// });
}