react-beautiful-dnd|react-beautiful-dnd 实现组件拖拽功能 react-beautiful-dnd实现组件拖拽功

1.安装
2.APi
3.react-beautiful-dnd demo

3.1 demo1 纵向组件拖拽
3.2 demo2 水平拖拽
3.3 demo3实现一个代办事项的拖拽（纵向横向拖拽）

4.感受

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

1.安装 ? 在已有react项目中执行以下命令 so easy。

# yarnyarn add react-beautiful-dnd # npmnpm install react-beautiful-dnd --save

2.APi 【react-beautiful-dnd|react-beautiful-dnd 实现组件拖拽功能】详情查看官方文档。

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 niceruserSelect: "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 ({(provided, snapshot) => ({this.state.items.map((item, index) => ({(provided, snapshot) => ({item.content})}))}{provided.placeholder})}); }}

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 niceruserSelect: "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 ({(provided, snapshot) => ({this.state.items.map((item, index) => ({(provided, snapshot) => ({item.content})}))}{provided.placeholder})})}} 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 组件拖拽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！