一個(gè)React.js 的 漂亮,可移植性 列表拖拽庫跟继。想了解更多react-beautiful-dnd特點(diǎn)適用人群請看 官方文檔落萎、 中文翻譯文檔
1.安裝
? 在已有react項(xiàng)目中 執(zhí)行以下命令 so easy伐脖。
# yarn
yarn add react-beautiful-dnd
# npm
npm install react-beautiful-dnd --save
2.APi
詳情查看 官方文檔汗捡。
3.react-beautiful-dnd demo
3.1 demo1 縱向組件拖拽
效果下圖：
demo1.gif
實(shí)現(xiàn)代碼：
import React, { Component } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
//初始化數(shù)據(jù)
const getItems = count =>
Array.from({ length: count }, (v, k) => k).map(k => ({
id: `item-${k + 1}`,
content: `this is content ${k + 1}`
}));
// 重新記錄數(shù)組順序
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const grid = 8;
// 設(shè)置樣式
const getItemStyle = (isDragging, draggableStyle) => ({
// some basic styles to make the items look a bit nicer
userSelect: "none",
padding: grid * 2,
margin: `0 0 ${grid}px 0`,
// 拖拽的時(shí)候背景變化
background: isDragging ? "lightgreen" : "#ffffff",
// styles we need to apply on draggables
...draggableStyle
});
const getListStyle = () => ({
background: 'black',
padding: grid,
width: 250
});
export default class ReactBeautifulDnd extends Component {
constructor(props) {
super(props);
this.state = {
items: getItems(11)
};
this.onDragEnd = this.onDragEnd.bind(this);
}
onDragEnd(result) {
if (!result.destination) {
return;
}
const items = reorder(
this.state.items,
result.source.index,
result.destination.index
);
this.setState({
items
});
}
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<center>
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<div
//provided.droppableProps應(yīng)用的相同元素.
{...provided.droppableProps}
// 為了使 droppable 能夠正常工作必須 綁定到最高可能的DOM節(jié)點(diǎn)中provided.innerRef.
ref={provided.innerRef}
style={getListStyle(snapshot)}
>
{this.state.items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{item.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</center>
</DragDropContext>
);
}
}
3.2 demo2 水平拖拽
? 效果下圖：
demo2.gif
實(shí)現(xiàn)代碼： 其實(shí)和縱向拖拽差不多 Droppable 中 多添加了一個(gè)排列順序的屬性，direction="horizontal"
import React, { Component } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const getItems = count => (
Array.from({ length: count }, (v, k) => k).map(k => ({
id: `item-${k + 1}`,
content: `this is content ${k + 1}`
}))
)
// 重新記錄數(shù)組順序
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
//刪除并記錄 刪除元素
const [removed] = result.splice(startIndex, 1);
//將原來的元素添加進(jìn)數(shù)組
result.splice(endIndex, 0, removed);
return result;
};
const grid = 8;
// 設(shè)置樣式
const getItemStyle = (isDragging, draggableStyle) => ({
// some basic styles to make the items look a bit nicer
userSelect: "none",
padding: grid * 2,
margin: `0 ${grid}px 0 0 `,
// 拖拽的時(shí)候背景變化
background: isDragging ? "lightgreen" : "#ffffff",
// styles we need to apply on draggables
...draggableStyle
});
const getListStyle = () => ({
background: 'black',
display: 'flex',
padding: grid,
overflow: 'auto',
});
class ReactBeautifulDndHorizontal extends Component {
constructor(props) {
super(props);
this.state = {
items: getItems(10)
};
this.onDragEnd = this.onDragEnd.bind(this);
}
onDragEnd(result) {
if (!result.destination) {
return;
}
const items = reorder(
this.state.items,
result.source.index,
result.destination.index
);
this.setState({
items
});
}
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppable" direction="horizontal">
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
{this.state.items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{item.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
)
}
}
export default ReactBeautifulDndHorizontal
3.3 demo3實(shí)現(xiàn)一個(gè)代辦事項(xiàng)的拖拽（縱向 橫向拖拽）
demo3.gif
實(shí)現(xiàn)原理其實(shí)大同小異 奔穿。代碼整理后放在github上豹休。地址：github
)
4.感受
目前簡單的使用react - beautiful-dnd下來感覺 炊昆，上手感覺挺簡單，api也不繁瑣威根。性能也不錯(cuò)（demo2中做過渲染170多個(gè)task凤巨。拖拽起來還是如絲般順滑）。日后遇到啥不足會(huì)mark在一下洛搀。
