Sortable的依賴引入和簡單使用參見:https://blog.csdn.net/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></div> --><ul id="operator" class=" layui-col-md12 " tyle=" border:1px solid black;height:76px;"><li class="operator-style">A_XiangRaoZuWenSheng</li><li class="operator-style">AYKZQ_CS</li><li class="operator-style">ADD</li><li class="operator-style">TAVG</li></ul><div class="layui-col-md12">操作區預覽:{{drag.operator1}}</div><ul id="operator1" class="layui-col-md12" onFocus="drag.getFocus('operator1')" style="height:37px; border:1px solid black"><button ng-click="drag.preOp('operator1')">預覽操作區</button><button ng-click="drag.genOp('operator1')">生成操作數</button></ul><ul id="operator2" class="layui-col-md12 " style="height:37px; border:1px solid black;margin-top:15px;">暫存區</ul><input id="operator3" class="layui-col-md12 " style="height:74px; border:1px solid black;margin-top:15px;" placeholder="回收區"><button ng-click="showExpr()">顯示表達式</button><ul>{{expression}}</ul></div></div></div> // drag.js代碼,Sortable.create(operator, {group: {name: "computePoint",pull: 'clone'},sort: true,})// 操作區Sortable.create(operator1, {group: 'computePoint',sort: true,})// 暫存區Sortable.create(operator2, {group: 'computePoint',sort: true,})// 回收區Sortable.create(operator3, {group: {name: "computePoint",pull: false,},sort: false,})// 對drag頁面的操作;this.$scope.drag = {operator1: '', // 操作數1預覽// 添加所有操作數, 放到操作數列表.addAll2Op: (id) => {let list = $('#operator').children('li');let len = list.length;if (len > 0) {for (let i = 0; i < len; i++) {let item = list[i];$('#' + id).append(item);}}},// 預覽操作數preOp: (id) => {this.$scope.drag.operator1 = '';let op = this.$scope.drag.handleOp(id);this.$scope.drag.operator1 = op;},// 處理操作數handleOp: (id) => {let len = $('#' + id).children('li').length;if (len < 1) {return '';}if (len === 1) {let op = $('#' + id).children('li')[0].innerHTML;return op;} else {let expr = ''; // 表達式初始化為空let list = $('#' + id).children('li');let type = ''; // 判斷是ADD類型還是MAX類型for (let i = 0; i < len; i++) {let item = list[i].innerHTML;if (item === 'MAX' || item === 'MIN' || item === 'AVG' ||item === 'TAVG' || item === 'TMIN' || item === 'TMAX') {type = "MAX";break;}if (item === 'ADD' || item === 'MINUS' || item === 'MULT' ||item === 'DIV') {type = "ADD";break;}}if (type === '') {return '缺少操作符!'} else if (type === 'MAX') {for (let i = 0; i < len; i++) {let item = list[i].innerHTML; // 獲取當前li的值if (item === 'MAX' || item === 'MIN' || item === 'AVG' ||item === 'TAVG' || item === 'TMIN' || item === 'TMAX') {expr = item + "(" + expr;} else if (i !== len - 1) {expr += item + ',';}if (i === len - 1) {expr = expr + item + ')';}}} else { // ADD類型expr += '('for (let i = 0; i < len; i++) {let item = list[i].innerHTML;if (item === 'ADD') {item = ' + '}if (item === 'MINUS') {item = ' - ';}if (item === 'MULT') {item = ' x ';}if (item === 'DIV') {item = ' ÷ ';}expr += item;if (i === len - 1) {expr += ')';}}}return expr;}},// 生成操作數genOp: (id) => {let op = this.$scope.drag.handleOp(id);let list = $('#' + id).children('li');let len = list.length;if (len > 0) {for (let i = 0; i < len; i++) {let item = list[i];$('#operator3').append(item);}}let option = '<li class="operator-style" draggable="false" style="width:200px;">' + op + '</li>';$('#' + id).append(option);}}

總結

以上是生活随笔為你收集整理的javascript --- 利用Sortable实现一个可视化公式编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。