1. 首页

React无门槛实现拖拽布局、表单设计器

现在有很多优秀的拖拽布局工具,表单设计器layui拖拽布局, Vue-Layout

我们最近也实现了类似的功能,废话不多说,先把预览贴出来(不知道为什么掘金现在图片不支持gif了,还要自己上传到图床)。

React无门槛实现拖拽布局、表单设计器

React无门槛实现拖拽布局、表单设计器

React无门槛实现拖拽布局、表单设计器

在实现这个的功能的过程中,也走了一点弯路,我们内部1.0版本的时候,使用的是sortablejs,由于代码写的比较混乱,拖拽功能经常出现卡死的现象,以为是sortablejs的问题,然后又换成大名鼎鼎的React Dnd,和Redux是同一个作者,但是Dnd并不是太符合我们的需求,拖拽的API确实很强大,但是排序、跨级拖拽等好多功能都要自己手动实现,在实现完跨级拖拽以后,老大让我换成了sortablejs

拖拽工具:sortablejsReact Dnd

我们还是先说下思路,还有我们在1.0里给自己挖的坑,你们也要小心哈?。

如果有过树组件开发经验的小伙伴,应该对递归很熟悉了,左侧的页面结构要用到,右侧的渲染也要用到,整体来说,左侧的组件树和右侧的画布区,就是两个递归函数。

页面即数组,组件即对象

我们要生成页面,肯定不是只看看页面长什么样子,好不好看,而是要把数据保存起来,生成我们想要的格式,首先就要面临的问题是,这个数据应该长什么样子,都有哪些字段,分别干什么用。

页面即数组很好理解,一个页面上可以有多个组件,而且有顺序,用数组就比较方便了,如果有子元素怎么办,不管vue还是react,UI框里都会有Tree组件,数据格式都是使用children向下嵌套数据组,这点好理解吧?

举个栗子,iview的tree组件文档

React无门槛实现拖拽布局、表单设计器

子元素和我们有什么关系呢,我们看表单设计器layui拖拽布局里,都有容器组件,什么意思呢,就是可以在这个组件下继续拖拽放入组件,如果数据无限的向下延伸,那就需要children帮忙向下无限嵌套。

React无门槛实现拖拽布局、表单设计器

React无门槛实现拖拽布局、表单设计器

嵌套的问题解决了,组件怎么渲染呢,我们先不考虑拖拽的问题,单单一个数据对象渲染成组件,怎么实现呢? 先大致想一下,我们如果使用Ant Design的组件,我们得知道组件的名称吧?得有自己props吧? 暂定两个字段nameattr,包括上面提到的children字段,我们先简单的做个demo,用ant的模板。


import React, { Component } from 'react'; import { Rate,Input,DatePicker } from 'antd'; const { MonthPicker, RangePicker, WeekPicker } = DatePicker; const GlobalComponent = { Rate, Input, MonthPicker, RangePicker, WeekPicker, } class EditPage extends Component { render() { // 测试数据 const Data = [ { name: 'Input', attr: { size:'large', value:'第一个' } }, { name: 'Input', attr: { size:'default', value:'第二个' } }, { name: 'Input', attr: { size:'small', value:'第三个' } }, { name: 'Containers', attr: { style:{ border:'1px solid red' } }, children:[ { name: 'Input', attr: { size:'small', value:'嵌套的input' } }, { name: 'Rate', attr: { size:'small', value:'嵌套的input' } }, { name: 'MonthPicker', attr: {} }, { name: 'RangePicker', attr: {} }, { name: 'WeekPicker', attr: {} }, ] }, ]; // 递归函数,JS中文网 - 前端进阶资源教程 www.javascriptc.com const loop = (arr) => ( arr.map(item => { if(item.children){ return <div {...item.attr} >{loop(item.children)}</div> } const ComponentInfo = GlobalComponent[item.name] return <ComponentInfo {...item.attr} /> }) ); return ( <> {loop(Data)} </> ); } } export default EditPage;

页面已经渲染出来了,怎么样 很简单吧? 接下来 我们一起来实现拖拽吧

React无门槛实现拖拽布局、表单设计器

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

拖拽的实现

数据格式我们有了,渲染也实现了,剩下的就是拖拽了,我们先了解一下了sortablejs这个插件,官方有提供react版的组件react-sortablejs

安装依赖,在页面中引入组件,不多说,看react-sortablejs文档

接下来先说一下sortablejs提供给我们什么功能

  1. 如果从容器A拖拽到容器B,两个容器group参数的name保持一致才能实现相互拖拽。
  2. 容器是否可移入和移出,是在group中配置pullput属性。
  3. 容器有两个监听事件,一个是移入的onAdd方法,一个是更新的onUpdate方法
  4. onAddonUpdate只能监听到拖拽元素的data-id属性

我们怎么借助这些功能实现?

  1. 组件列表,就是左侧供我们拖拽的源组件列表,不能移出,并且data-id需要为组件名称,才能告知右侧的容器拖拽进入的是什么组件。
  2. 右侧容器需要嵌套,递归展示,有子元素时要展示容器而不是组件。
  3. 右侧的容器要可移入移出,方便跨容器拖拽。
  4. 为了把新增的组件数据放进右侧对应的位置,右侧容器的data-id修改为下标的路径2-3-2这样的形式,对应根数组的第2个元素的第3个子元素的第2个子元素。

好了,现在先把供我们拖拽的源组件列表写出来

然后把右侧的容器改造一下,如果有子元素则展示一个新的容器,并且加上add的监听方法。

React无门槛实现拖拽布局、表单设计器

需要注意的是,跨级拖拽的时候触发onAdd,需要判断一下进入的data-id到底是下标还是组件,如果为组件直接添加,如果为下标,则对比一下新增和删除的路径,先操作靠下方的路径,再操作靠上的路径

import React, { Component } from 'react';
import { Rate,Input,DatePicker,Tag } from 'antd';
import Sortable from 'react-sortablejs';
import uniqueId from 'lodash/uniqueId';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
import { indexToArray, getItem, setInfo, isPath, getCloneItem, itemRemove, itemAdd } from './utils';
import find from 'find-process';
const GlobalComponent = {
    Rate,
    Input,
    MonthPicker,
    RangePicker,
    WeekPicker,
}


const soundData = [
    {
        name: 'MonthPicker',
        attr: {}
    },
    {
        name: 'RangePicker',
        attr: {}
    },
    {
        name: 'WeekPicker',
        attr: {}
    },
    {
        name: 'Input',
        attr: {
            size:'large',
            value:'第一个'
        }
    },
    {
        name: 'Containers',
        attr: {
            style:{
                border:'1px solid red'
            }
        },
    }
]

class EditPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            Data:[{
                name: 'Input',
                attr: {
                    size:'large',
                    value:'第一个'
                }
            }],
        };
    }

     // 拖拽的添加方法
     sortableAdd = evt => {
        // 组件名或路径
        const nameOrIndex = evt.clone.getAttribute('data-id');
        // 父节点路径
        const parentPath = evt.path[1].getAttribute('data-id');
        // 拖拽元素的目标路径
        const { newIndex } = evt;
        // 新路径 为根节点时直接使用index
        const newPath = parentPath ? `${parentPath}-${newIndex}` : newIndex;
        // 判断是否为路径 路径执行移动,非路径为新增
        if (isPath(nameOrIndex)) {
            // 旧的路径index
            const oldIndex = nameOrIndex;
            // 克隆要移动的元素
            const dragItem = getCloneItem(oldIndex, this.state.Data)
            // 比较路径的上下位置 先执行靠下的数据 再执行考上数据
            if (indexToArray(oldIndex) > indexToArray(newPath)) {
                // 删除元素 获得新数据
                let newTreeData = itemRemove(oldIndex, this.state.Data);
                // 添加拖拽元素
                newTreeData = itemAdd(newPath, newTreeData, dragItem)
                // 更新视图
                this.setState({Data:newTreeData})
                return
            }
            // 添加拖拽元素
            let newData = itemAdd(newPath, this.state.Data, dragItem)
            // 删除元素 获得新数据
            newData = itemRemove(oldIndex, newData);

            this.setState({Data:newData})
            return
        }

        // 新增流程 创建元素 => 插入元素 => 更新视图
        const id = nameOrIndex

        const newItem = _.cloneDeep(soundData.find(item => (item.name === id)))

        // 为容器或者弹框时增加子元素
        if ( newItem.name === 'Containers') {
            const ComponentsInfo = _.cloneDeep(GlobalComponent[newItem.name])
            // 判断是否包含默认数据
            newItem.children = []
        }

        let Data = itemAdd(newPath, this.state.Data, newItem)

        this.setState({Data})
    }

    render() {

        // 递归函数,JS中文网 - 前端进阶资源教程 www.javascriptc.com
        const loop = (arr,index) => (
            arr.map((item,i) => {
                const indexs = index === '' ? String(i) : `${index}-${i}`;
                if(item.children){
                    return <div {...item.attr}
                        data-id={indexs}
                    >
                        <Sortable
                            key={uniqueId()}
                            style={{
                                minHeight:100,
                                margin:10,
                            }}
                            ref={c => c && (this.sortable = c.sortable)}
                            options={{
                                ...sortableOption,
                                // onUpdate: evt => (this.sortableUpdate(evt)),
                                onAdd: evt => (this.sortableAdd(evt)),
                            }}
                        >
                            {loop(item.children,indexs)}
                        </Sortable>
                    </div>
                }
                const ComponentInfo = GlobalComponent[item.name]
                return <div data-id={indexs}><ComponentInfo {...item.attr} /></div>
            })
        )

        const sortableOption = {
            animation: 150,
            fallbackOnBody: true,
            swapThreshold: 0.65,
            group: {
                name: 'formItem',
                pull: true,
                put: true,
            },
        }

        return (
            <>
                <h2>组件列表</h2>
                <Sortable
                    options = {{
                            group:{
                                name: 'formItem',
                                pull: 'clone',
                                put: false,
                            },
                            sort: false,
                        }}
                >
                    {
                        soundData.map(item => {
                            return <div data-id={item.name}><Tag>{item.name}</Tag></div>
                        })
                    }
                </Sortable>
                <h2>容器</h2>
                <Sortable
                    ref={c => c && (this.sortable = c.sortable)}
                    options={{
                        ...sortableOption,
                        // onUpdate: evt => (this.sortableUpdate(evt)),
                        onAdd: evt => (this.sortableAdd(evt)),
                    }}
                    key={uniqueId()}
                >
                    {loop(this.state.Data,'')}
                </Sortable>
            </>
        );
    }
}

export default EditPage;

现在跨级操作和新增已经完成了,接下来我们补充一下同级交换位置的功能,我们用了immutability-helper这个工具函数,具体的自己看文档吧,只是用到了数组换位。


import update from 'immutability-helper' // 拖拽的排序方法 sortableUpdate = evt => { // 交换数组 const { newIndex, oldIndex } = evt; // 父节点路径 const parentPath = evt.path[1].getAttribute('data-id'); // 父元素 根节点时直接调用data,JS中文网 - 前端进阶资源教程 www.javascriptc.com let parent = parentPath ? getItem(parentPath, this.state.Data) : this.state.Data; // 当前拖拽元素 const dragItem = parent[oldIndex]; // 更新后的父节点 parent = update(parent, { $splice: [[oldIndex, 1], [newIndex, 0, dragItem]], }); // 最新的数据 根节点时直接调用data const Data = parentPath ? setInfo(parentPath, this.state.Data, parent) : parent // 调用父组件更新方法 this.setState({Data}) }

现在跨级和同级的排序的功能都已经完成了,我们看看预览图吧。

React无门槛实现拖拽布局、表单设计器

onUpdateonAdd的函数中,自己封装了一些根据下标操作数组的方法,也是按照函数式的方式,每个函数返回新的结果,写的不是特别好,多多见谅哈,剩下的删除、选中啦,根据自己的需求增加功能就可以了,我把源码放在了github上,有需要的拿去吧,码字码到手酸,吃饭去了?。

演示地址

源码:https://github.com/nihaojob/DragLayout

作者:愚坤
链接:https://juejin.im/post/5dabb52bf265da5b616de75d

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:React无门槛实现拖拽布局、表单设计器

链接:https://www.javascriptc.com/2532.html

« React组件设计实践总结01 – 类型检查
React VS Vue:2020年选哪个更好?»
Flutter 中文教程资源

相关推荐

QR code