react-beautiful-dnd拖拽排序功能的实现过程
作者:qing_小诺
这篇文章主要介绍了react-beautiful-dnd拖拽排序功能的实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
如果 react 项目中需要用到拖拽功能,可以使用 react-beautiful-dnd 插件。
1、react-beautiful-dnd插件
github官网链接:https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/about/examples.md
打开后显示下图:
2、查看所有范例
点上图中的“All the examples!”,可以查看所有范例(链接:https://react-beautiful-dnd.netlify.app/)
如下图:
3、代码示例
点击上图中的“Simple horizontal list”
可以看到代码示例:
index.js代码如下:稍加改造就能直接用到项目中啦~~~
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; // fake data generator const getItems = count => Array.from({ length: count }, (v, k) => k).map(k => ({ id: `item-${k}`, content: `item ${k}`, })); // a little function to help us with reordering the result 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; 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 Component { constructor(props) { super(props); this.state = { items: getItems(6), }; this.onDragEnd = this.onDragEnd.bind(this); } onDragEnd(result) { // dropped outside the list if (!result.destination) { return; } const items = reorder( this.state.items, result.source.index, result.destination.index ); this.setState({ items, }); } // Normally you would want to split things out into separate components. // But in this example everything is just done in one place for simplicity render() { return ( <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> ); } } // Put the thing into the DOM! ReactDOM.render(<App />, document.getElementById('root'));
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。