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

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

article 2025/3/1 3:30:22

拖拽功能在平时开发中是很常见的，这篇文章主要使用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 nicer
    userSelect: 'none',
    padding: grid * 2,
    margin: `0 ${grid}px 0 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',
    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 result
    reOrder = (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 list
        if (!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) => (
                            <div
                                ref={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) => (
                                            <div
                                                ref={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 的代码，可做到。
效果展示