【React】react-beautiful-dnd 拖拽排序功能的实现

qing_小诺

已于 2023-01-11 13:29:27 修改

阅读量1.1k

点赞数

分类专栏： ReactJs 文章标签： react.js

于 2023-01-11 13:27:50 首次发布

本文链接：https://blog.csdn.net/qq_33237207/article/details/128641183

版权

ReactJs 专栏收录该内容

21 篇文章 4 订阅

订阅专栏

文章介绍了如何在React项目中使用react-beautiful-dnd插件来添加拖拽功能。通过提供官方GitHub链接、所有示例以及一个简单的水平列表代码示例，展示了如何集成和使用该插件。在代码示例中，展示了DragDropContext、Droppable和Draggable组件的用法，以及如何处理拖放结束时的列表重新排序。

摘要由CSDN通过智能技术生成

如果 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'));