react-beautiful-dnd 实现组件拖拽

一个react.js 的 漂亮,可移植性 列表拖拽库。想了解更多react-beautiful-dnd特点适用人群请看官方文档、中文翻译文档

npm：

1.安装

​ 在已有react项目中 执行以下命令 so easy。

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

2.api

详情查看 官方文档。

3.react-beautiful-dnd demo

3.1 demo1 纵向组件拖拽

效果下图：

demo1.gif

实现代码：

import react, { component } from "react";
import { dragdropcontext, droppable, draggable } from "react-beautiful-dnd";
 
//初始化数据
const getitems = count =>
  array.from({ length: count }, (v, k) => k).map(k => ({
    id: `item-${k + 1}`,
    content: `this is content ${k + 1}`
  }));
 
// 重新记录数组顺序
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 0 ${grid}px 0`,
 
  // 拖拽的时候背景变化
  background: isdragging ? "lightgreen" : "#ffffff",
 
  // styles we need to apply on draggables
  ...draggablestyle
});
 
const getliststyle = () => ({
  background: 'black',
  padding: grid,
  width: 250
});
 
 
 
export default class reactbeautifuldnd extends component {
  constructor(props) {
    super(props);
    this.state = {
      items: getitems(11)
    };
    this.ondragend = this.ondragend.bind(this);
  }
 
  ondragend(result) {
    if (!result.destination) {
      return;
    }
 
    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );
 
    this.setstate({
      items
    });
  }
 
 
  render() {
    return (
      <dragdropcontext ondragend={this.ondragend}>
        <center>
          <droppable droppableid="droppable">
            {(provided, snapshot) => (
              <div
              //provided.droppableprops应用的相同元素.
                {...provided.droppableprops}
                // 为了使 droppable 能够正常工作必须 绑定到最高可能的dom节点中provided.innerref.
                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>
        </center>
      </dragdropcontext>
    );
  }
}

3.2 demo2 水平拖拽

​ 效果下图：

demo2.gif

实现代码： 其实和纵向拖拽差不多 droppable 中 多添加了一个排列顺序的属性，direction=”horizontal”

import react, { component } from "react";
import { dragdropcontext, droppable, draggable } from "react-beautiful-dnd";
 
 
const getitems = count => (
  array.from({ length: count }, (v, k) => k).map(k => ({
    id: `item-${k + 1}`,
    content: `this is content ${k + 1}`
  }))
)
 
// 重新记录数组顺序
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 `,
 
  // 拖拽的时候背景变化
  background: isdragging ? "lightgreen" : "#ffffff",
 
  // styles we need to apply on draggables
  ...draggablestyle
});
 
const getliststyle = () => ({
  background: 'black',
  display: 'flex',
  padding: grid,
  overflow: 'auto',
});
 
 
class reactbeautifuldndhorizontal extends component {
  constructor(props) {
    super(props);
    this.state = {
      items: getitems(10)
    };
    this.ondragend = this.ondragend.bind(this);
  }
 
  ondragend(result) {
    if (!result.destination) {
      return;
    }
 
    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );
 
    this.setstate({
      items
    });
  }
 
  render() {
    return (
      <dragdropcontext ondragend={this.ondragend}>
        <droppable droppableid="droppable" direction="horizontal">
          {(provided, snapshot) => (
            <div
              {...provided.droppableprops}
              ref={provided.innerref}
              style={getliststyle(snapshot.isdraggingover)}
            >
              {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>
    )
  }
}
 
export default reactbeautifuldndhorizontal

3.3 demo3实现一个代办事项的拖拽（纵向 横向拖拽）

demo3.gif

实现原理其实大同小异 。代码整理后放在github上。地址：github

4.感受

目前简单的使用react – beautiful-dnd下来感觉 ，上手感觉挺简单，api也不繁琐。性能也不错（demo2中做过渲染170多个task。拖拽起来还是如丝般顺滑）。日后遇到啥不足会mark在一下。

到此这篇关于react-beautiful-dnd 实现组件拖拽的文章就介绍到这了,更多相关react-beautiful-dnd 组件拖拽内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！