说明

安装

npm install

yarn

项目使用umi脚手架创建的，使用的是Ant Design Pro模板。启动的时候可能会包bable的版本错误，搜一下换个版本就好了，环境Start，哈哈。

演示地址

反思

这是一个笨拙的数据结构，你会发现如果使用react来对tree进行渲染和开发时，性能将成为一个瓶颈。

实现思路

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

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

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

拖拽工具：sortablejs ，React Dnd

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

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

页面即数组，组件即对象

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

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

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

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

嵌套的问题解决了，组件怎么渲染呢，我们先不考虑拖拽的问题，单单一个数据对象渲染成组件，怎么实现呢？先大致想一下，我们如果使用Ant Design的组件，我们得知道组件的名称吧？得有自己props吧？暂定两个字段name和attr，包括上面提到的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: {}
                    },
                ]

            },
        ];
        
        // 递归函数
        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;

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

拖拽的实现

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

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

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

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

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

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

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

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

需要注意的是，跨级拖拽的时候触发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() {
        
        // 递归函数
        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
    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})
}

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

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

nihaojob/DragLayout

nihaojob

Reviews

Repository Details

说明

反思

实现思路

页面即数组，组件即对象

拖拽的实现

More Repositories