拖拽功能在平時開發(fā)中是很常見的典挑，這篇文章主要使用react-beautiful-dnd插件實現(xiàn)此功能琳骡。
非常好用煌往，附上GitHub地址：https://github.com/atlassian/react-beautiful-dnd

react-beautiful-dnd.png

廢話不多說，上代碼糠爬。

安裝及引入

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

# npm
npm install react-beautiful-dnd --save

// 2.使用
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

具體使用

// 樣式相關(guān) 代碼
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 droppableId="droppable" direction="horizontal"> 

中的 direction 屬性可以控制是水平方向還是垂直方向，配合相關(guān) getItemStyle 和 getListStyle 的代碼执隧，可做到揩抡。

最后，效果展示

react-beautiful-dnd-demo.gif

后記
其他好用拖拽組件集合：
1.react-grid-layout https://github.com/STRML/react-grid-layout