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

Vedu • 2020-11-10 08:03 • 资源分享 • 阅读 2434

今天给小伙伴们分享一个超漂亮的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 worlddiv>
		<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示例代码。

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

# 示例地址
https://react-beautiful-dnd.netlify.com/

# 仓库地址
https://github.com/atlassian/react-beautiful-dnd

ok，今天就分享到这里。感兴趣的话可以去看下，希望对大家有所帮助！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/14098.html

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

安装

快速使用

相关推荐

发表评论