高质量 react.js 拖拽排序组件

web前端进阶 06-15 2170

前言：

现在我们对“js对list进行排序”可能比较关怀，看官们都需要学习一些“js对list进行排序”的相关知识。那么小编也在网摘上汇集了一些对于“js对list进行排序””的相关内容，希望各位老铁们能喜欢，咱们快快来学习一下吧！

今天给小伙伴们分享一个超漂亮的React拖放列表组件ReactBeautifulDnd。

react-beautiful-dnd 基于React.js构建的拖拽排列组件，star高达21.1K+。提供强大美丽且丝滑般的拖放体验。

react-beautiful-dnd主要包含下面三个组件。

DragDropContext：用于包裹拖拽根组件，Draggable和Droppable都需要包裹在DragDropContext内；Droppable：用于包裹你需要拖动的组件，使组件能够被拖拽；Draggable：用于接收拖拽元素的组件，使组件能够放置；安装

$ npm i react-beautiful-dnd -S

快速使用

import React from 'react';import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";// 设置样式const getItemStyle = (isDragging, draggableStyle) => ({  userSelect: "none",  padding: grid * 2,  margin: `0 0 ${grid}px 0`,    // 拖拽的时候背景变化  background: isDragging ? "lightgreen" : "#ffffff",    // styles we need to apply on draggables  ...draggableStyle}); const getListStyle = () => ({  background: 'black',  padding: grid,  width: 250});class App extends React.Component {  constructor(props){    super(props);    this.state = {      items: [        {id: 'item-01', content: 'this is content'},        {id: 'item-02', content: 'this is content'},        {id: 'item-03', content: 'this is content'},        {id: 'item-04', content: 'this is content'},        {id: 'item-05', content: 'this is content'},        {id: 'item-06', content: 'this is content'},        {id: 'item-07', content: 'this is content'},        {id: 'item-08', content: 'this is content'},        {id: 'item-09', content: 'this is content'},        {id: 'item-10', content: 'this is content'},      ]    }  }  onBeforeCapture = () => {    /*...*/  };    onBeforeDragStart = () => {    /*...*/  };    onDragStart = () => {    /*...*/  };  onDragUpdate = () => {    /*...*/  };  onDragEnd = () => {    // the only one that is required  };    render() {    return (      <DragDropContext        onBeforeCapture={this.onBeforeCapture}        onBeforeDragStart={this.onBeforeDragStart}        onDragStart={this.onDragStart}        onDragUpdate={this.onDragUpdate}        onDragEnd={this.onDragEnd}      >        <div>Hello world</div>		<Droppable droppableId="droppable">            {(provided, snapshot) => (              <div                {...provided.droppableProps}                ref={provided.innerRef}                style={getListStyle(snapshot)}              >                {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>    );  }}

支持水平、垂直及混合拖拽效果。

另外还支持大数据、延迟及固定列表拖拽，拥有一样的流畅顺滑效果。

提供了丰富的文档及API示例代码。

附上项目示例及地址链接。