javascript --- > 利用Sortable实现一个可视化公式编辑器

本文介绍如何利用Sortable库创建一个可视化公式编辑器。编辑器包含操作数和操作符，用户可拖拽组合生成计算公式。编辑器支持操作数克隆、全部添加到操作区、暂存区和会收区功能，方便公式构建和编辑。

Sortable的依赖引入和简单使用参见:https://blog.youkuaiyun.com/piano9425/article/details/90437182
先简单的介绍一下可视化公式编辑器的功能(样式没有调,毕竟每个人的需求都不一样):
在这里插入图片描述
首先会有2个需要计算的(我称为操作数)A_XiangRaoZuWenSheng和AYKZQ_CS,以及两个操作符ADD(加法),TAVG(时间平均值)
可以把需要计算的操作数移到操作区,并配上相应的操作符:然后预览操作区:

可以看到操作数和符号生成了相应的公式.
点击生成操作数
在这里插入图片描述
可以看见刚才的2个操作数和1个操作符合并成了一个(level2)操作数.
可以把这个2级操作数放到暂存区,然后在操作区再生成一个2级操作数

这次用TAVG生成了一个2级操作数.
下面将2个操作数进行加运算.
得到最终需要的表达式:
在这里插入图片描述
注：
1.用于拖拽的操作数和操作符使用的是Sortable克隆功能,(这些操作数和操作符可以根据实际自己生成);
2.有一个全部添加到操作区,用于将所有的操作数和操作符添加到操作区,(实际中可能数据很多,一个一个拖拽不方便)
3.可以把暂时用不到的放到暂存区,生成错的或以后用不到的全部放入会收区.

下面附上相应的代码(主要是逻辑实现,根据具体的环境的不同,若复制粘贴不一定能实现):

// drag.html (格式部分使用了layui,可以根据个人喜欢和实际需求自己选择)
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">编辑操作数</h2>
        <div class="layui-colla-content layui-show">
            <div class="content">
                <div class="layui-col-md3"><button ng-click="drag.addAll2Op('operator1')">添加全部到操作区</button></div>
                <!-- <div class="layui-col-md3"><button ng-click="drag.addAll2Op('operator2')">添加全部到操作数2</button>