当前位置：首页 > news >正文

React 中实现拖拽功能-插件 react-beautiful-dnd

news 2025/7/29 3:52:41

拖拽功能在平时开发中是很常见的，这篇文章主要使用react-beautiful-dnd插件实现此功能。
非常好用，附上GitHub地址：https://github.com/atlassian/react-beautiful-dnd

安装及引入

// 1.引入
# yarn
yarn add react-beautiful-dnd# npm
npm install react-beautiful-dnd --save

具体使用

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";// 样式相关 代码
const grid = 8;
// 垂直样式
// 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`,
//
//     // change background colour if dragging
//     background: isDragging ? "lightgreen" : "grey",
//
//     // styles we need to apply on draggables
//     ...draggableStyle
// });
// const getListStyle = isDraggingOver => ({
//     background: isDraggingOver ? "lightblue" : "lightgrey",
//     padding: grid,
//     width: 250,
// });// 水平样式
const getItemStyle = (isDragging, draggableStyle) => ({// some basic styles to make the items look a bit niceruserSelect: 'none',padding: grid * 2,margin: `0 ${grid}px 0 0`,// change background colour if draggingbackground: isDragging ? 'lightgreen' : 'grey',// styles we need to apply on draggables...draggableStyle,
});
const getListStyle = isDraggingOver => ({background: isDraggingOver ? 'lightblue' : 'lightgrey',display: 'flex',padding: grid,overflow: 'auto',
});class App extends React.Component {constructor(props) {super(props)this.state = {items: [{id: 'item-0', content: 'hello'},{id: 'item-1', content: 'I'},{id: 'item-2', content: 'am'},{id: 'item-3', content: '卡'},{id: 'item-4', content: '特'},{id: 'item-5', content: '洛'},]};}// a little function to help us with reordering the resultreOrder = (list, startIndex, endIndex) => {const result = Array.from(list);const [removed] = result.splice(startIndex, 1);result.splice(endIndex, 0, removed);return result;};onDragEnd = (result) => {// dropped outside the listif (!result.destination) {return;}const items = this.reOrder(this.state.items,result.source.index,result.destination.index);this.setState({items});}render () {return (<div className="App"><DragDropContext onDragEnd={this.onDragEnd}><Droppable droppableId="droppable" direction="horizontal">{(provided, snapshot) => (<divref={provided.innerRef}style={getListStyle(snapshot.isDraggingOver)}{...provided.droppableProps}>{this.state.items.map((item, index) => (<Draggable key={item.id} draggableId={item.id} index={index}>{(provided, snapshot) => (<divref={provided.innerRef}{...provided.draggableProps}{...provided.dragHandleProps}style={getItemStyle(snapshot.isDragging,provided.draggableProps.style)}>{item.content}</div>)}</Draggable>))}{provided.placeholder}</div>)}</Droppable></DragDropContext></div>);}
}export default App;

说明一下：<Droppable />中的 direction 属性可以控制是水平方向还是垂直方向，配合相关 getItemStyle 和 getListStyle 的代码，可做到。
效果展示