在低代码中平台记录sortablejs拖拽使用经验

只需要关注sortablejs的api方面使用，业务方面可以忽略

import Sortable from "sortablejs";
import {generateRawInfo,getSplitTag,findCodeElemNode,findRawVueInfo,insertPresetAttribute,replaceRowID,
} from "@/utils/forCode";
import { html2Json } from "@/libs/bundle-html2json-esm";
import { getRawComponentContent, getRawComponentKey } from "@/utils/common";
import { addDiyFileByDragId } from "@/utils/dragComponentUtil/index.js";
import { setAnyTable } from "@/libs/tableEditor.js";
import { setDropAfterPos } from "./move-line.js";
import { drawLine } from "@/utils/lineHelper";
import { store as _store } from "@/libs/store.js";
import { cloneDeep, uniqBy } from "lodash-es";const handleObj = { key: "bob", entity: null, containerDom: null, vccElKey: null };
const whiteListKeys = ["el-card", "el-table"]; //含有子节点的必须提前写在这function loopDom(childNodes) {childNodes.forEach((ele) => {let key = geVccElKey(ele);if (ele.nodeName.includes("#")) {return;}if (!key) {return;}if (ele.classList.contains("actionWrap")) {return;}Sortable.create(ele, commonOps);if (ele.childNodes && ele.childNodes.length) {loopDom(ele.childNodes);}});
}const setData = (dataTransfer, element) => {const raw = generateRawInfo(element);const str = `${element.localName}${getSplitTag()}${element.innerText}${getSplitTag()}${0}${getSplitTag()}${element.style.cssText}${getSplitTag()}${JSON.stringify(raw)}`;dataTransfer.setData("text/plain", str);
};const newMerge = (o1, o2, currentPointPositionAfterIndex = -1, fn = null) => {if (o1 && o2) {if (!o1["__children"]) {o1["__children"] = [];}if (currentPointPositionAfterIndex > -1) {o1["__children"].splice(currentPointPositionAfterIndex, 0, o2);} else {o1["__children"].push(o2);}o2.__proto__ = { parentCodeNode: o1 };if (fn) {fn();}}
};const onEnd = async (event) => {const {originalEvent: { dataTransfer },} = event;const renderControlPanel = window.mainPanelProvider.getControlPanelRoot();let container = renderControlPanel.firstChild; //querySelector(`[lc_id="container"]`);let json = await html2Json(container.innerHTML);const data = dataTransfer.getData("text/plain");const [, , , , rawInfo] = data.split(getSplitTag());console.log("转换得原始数据:", json);if (!rawInfo || rawInfo == "undefined") {console.log('rawInfo == "undefined":', rawInfo);return;}const newDropObj = JSON.parse(rawInfo);console.log("newDropObj:", newDropObj);//判断lc_id是否是diy组件并importlet diy_lc_id = getRawComponentContent(newDropObj).lc_id;addDiyFileByDragId(diy_lc_id);window.mainPanelProvider.removeSame(newDropObj);// 插入预设属性insertPresetAttribute(newDropObj);// 使新拖入的代码与原来的做脱离replaceRowID(newDropObj, "");// 更新代码结构关系const codeTargetElement = findCodeElemNode(window.mainPanelProvider.currentPointDropInfo.target);if (codeTargetElement) {let temp = findRawVueInfo(codeTargetElement);console.log("渲染容器：", getRawComponentContent(temp));window.mainPanelProvider.backup();newMerge(getRawComponentContent(temp),newDropObj,window.mainPanelProvider.currentPointDropInfo.index,() => {window.mainPanelProvider.sustainedMarkElement(getRawComponentContent(newDropObj).lc_id);window.mainPanelProvider.eventEmitter.emit("onMerged");});//任意拖拽window.mainPanelProvider.isAnyDrag? setDropAfterPos(originalEvent.clientX, originalEvent.clientY, newDropObj): null;setAnyTable(newDropObj); //设置任意表格window.mainPanelProvider.render(window.mainPanelProvider._rawDataStructure);}
};const onMove = (/**Event*/ event, /**Event*/ originalEvent) => {drawLine(event, originalEvent);
};const isEmpty = (obj) => {return JSON.stringify(obj) === "{}";
};//防止内存爆
const changeObjectToTree = (data, attr = "__children", sub = "__children", label = "label") => {let newArr = [];for (let i = 0; i < data.length; i++) {const key = getRawComponentKey(data[i]);let item = cloneDeep(data[i][key]);let oldInfo = cloneDeep(data[i][key]);if (item) {newArr[i] = {[key]: {...item,[sub]: [],},};if (oldInfo[attr] && oldInfo[attr].length) {newArr[i][key][sub] = changeObjectToTree(oldInfo[attr], attr, sub);}}}return newArr;
};const isChildrenEmpty = (lcidObj, parentLc_id) => {for (const key in lcidObj) {const obj = lcidObj[key];if (!obj) {return;}// debugger;if (!obj || !obj.children || isEmpty(obj.children)) {lcidObj[parentLc_id] = null;} else {//debugger;let k = Object.keys(obj.children)[0];let o1 = obj.children[k];let k1 = Object.keys(o1)[0];isChildrenEmpty(o1, k1);}}
};//白名单key
const whiteListKeyFn = (obj) => {let key = getRawComponentKey(tree[obj.lc_id]);let isClear = whiteListKeys.some((k) => {return k === key;});isClear ? null : (obj.__children = []);
};const setLcidChildren = (objC, template, treeObjC = null) => {for (let lc_id in objC) {let obj = objC[lc_id];let treeObj = tree[lc_id];let o1 = getRawComponentContent(treeObj);whiteListKeyFn(o1);if (treeObjC) {treeObjC.__children.push(treeObj);} else {template.push(treeObj);}if (obj && obj.children && !isEmpty(obj.children)) {for (let num in obj.children) {let lcidObj = obj.children[num];setLcidChildren(lcidObj, template, o1);}}}
};//获取最新模板
const getTemplate = (lcidObj, template, treeObj = null) => {for (let num in lcidObj) {let obj = lcidObj[num];setLcidChildren(obj, template, treeObj);}
};const getLcids = (children, lcidObj, parentLc_id = null, parentIndex = null) => {//debugger;children.length &&children.forEach((dom, index) => {//debugger;if (dom.classList.contains("actionWrap")) {return;}let lc_id = dom.getAttribute("lc_id");if (lc_id) {// debugger;if (parentLc_id) {if (dom.children && dom.children.length) {let obj = {};obj[lc_id] = { children: {} };if (!lcidObj[parentLc_id] || isEmpty(lcidObj[parentLc_id])) {lcidObj[parentLc_id] = { children: {} };}lcidObj[parentLc_id].children[index] = obj;let childrendoms = [].slice.call(dom.children);getLcids(childrendoms, lcidObj[parentLc_id].children[index], lc_id, index);} else {//debugger;let obj = {};obj[lc_id] = null;let parentChild = lcidObj[parentLc_id].children;let parentChildLen = Object.keys(parentChild).length;parentChild[parentChildLen] = obj;console.log("parentChildLen:", parentChildLen);console.log("parentChild:", parentChild);}} else {if (dom.children && dom.children.length) {let obj = {};obj[lc_id] = { children: {} };lcidObj[index] = obj;let childrendoms = [].slice.call(dom.children);getLcids(childrendoms, lcidObj[index], lc_id, index);} else {let obj = {};obj[lc_id] = null;lcidObj[index] = obj;}}} else {isChildrenEmpty(lcidObj, parentLc_id);}});
};const geVccElKey = (target) => {try {const __rawVueInfo__ = window.tree[target.attributes.lc_id.nodeValue];const key = getRawComponentKey(__rawVueInfo__);return key;} catch (error) {return null;}
};export const leftOps = {animation: 200,group: { name: "group", put: false, pull: "clone" },sort: false,easing: "cubic-bezier(1, 0, 0, 1)",chosenClass: "mark-element-unit",setData,onStart: function (event) {_store.commit("setIsDrop", false);},
};export const commonOps = {animation: 200,handle: ".copyIcon", //必须搭配draggable属性才会生效喔draggable: ".mark-element",group: {name: "group",/*因为用了filter属性，根据你自己的需求注释掉put: () => {if (handleObj.vccElKey != "div") {return true;}return false;},pull: () => {if (!handleObj.vccElKey) {return false;}return true;},*/},filter: (evt, target) => {let key = geVccElKey(target);if (key) {return false;}return true;},easing: "cubic-bezier(1, 0, 0, 1)",setData,onStart: function (event) {window.mainPanelProvider.backup();const { item } = event;let key = geVccElKey(item);handleObj.vccElKey = key;_store.commit("setIsDrop", true);},onEnd: async function (event) {if (!handleObj.vccElKey) {return;}/*let lcidObj = {0: {"42qryko5ba": {children: {0: {kdc7rq479g: null,},},},},1: {"2fdjr1n7w2": {children: {0: {"8jdoyxe938": null,},},},},2: {w9tr5ojf1f: {children: {0: {wriaw2ggwp: {children: {0: {kdc7rq479g: null,},},},},},},},3: {kdc7rq479g: null,},};*/let lcidObj = {};let template = [];const renderControlPanel = window.mainPanelProvider.getControlPanelRoot();let wrapdom = renderControlPanel.firstChild;let wrapdoms = [].slice.call(wrapdom.children);getLcids(wrapdoms, lcidObj);getTemplate(lcidObj, template);let temp = changeObjectToTree(template);console.log("顺序", lcidObj);console.log("模板", template);console.log("最终模板", temp);setTimeout(() => {window.tree.container.div.__children = temp;let cloneR = window.tree.root; //cloneDeep(window.tree.root);let obj0 = cloneR.template.__children[0];obj0.div.__children = temp;window.mainPanelProvider.render(cloneR);}, 0);},
};export default function sortableInit() {handleObj.containerDom = document.querySelector(`[lc_id="container"]`);handleObj.entity = Sortable.create(handleObj.containerDom, commonOps);loopDom(handleObj.containerDom.childNodes);
}

在低代码中平台记录sortablejs拖拽使用经验相关推荐

中易低代码开发平台，可视化开发环境推动企业数字化应用
近年来,"低代码平台"的概念在业内持续升温,除了圈内人士的关注外,还吸引了不少投资者和交易市场的关注. 对于低代码开发平台来说,其实是一种可视化的软件开发形式,用户只需通过前端的可 ...
华为AppCube通过中国信通院“低代码开发平台通用能力要求”评估
摘要:华为AppCube应用魔方顺利通过信通院评估,被认证为具备 "低代码开发平台通用能力"的企业服务平台. 本文分享自华为云社区<华为AppCube通过中国信通院" ...
推荐一个开源低代码开发平台 Corteza
Corteza 低代码开发平台 Corteza低代码开发平台,官网: https://cortezaproject.org/ 截至目前,是我找到的,唯一一个100%免费的开源平台了.我查了将近十多个开 ...
教你一招：低代码开发平台实现抗疫物资管理系统的搭建
2019年末发生了全球性的公共卫生--新冠疫情,这次疫情给人类的生活带来了巨大的影响与威胁.纵观全球疫情,中国因其防控得当让疫情获得了很好都得控制,避免了大规模蔓延带来的伤害.经过近两年的" ...
Jeecg-Boot 2.1.3 大屏版本发布，基于SpringBoot的低代码开发平台
项目介绍 JeecgBoot是一款基于代码生成器的JAVA低代码开发平台,开源界"小普元"超越传统商业企业级开发平台!采用前后端分离架构:SpringBoot 2.x,Ant De ...
写代码太累，找一款低代码开发平台吧
现代社会变化太快,一个好想法,如果不尽快落地,很快就会被其他公司抢先了或者错过了行情.软件行业尤其如此,因为传统开发程序的方法耗时长.成本高,还没等你开发出来,要么其他公司做出了类似产品,要么因长时间 ...
低代码开发平台好不好用？它能够开发哪些软件？
低代码开发平台,能够开发出几乎所有的业务管理系统! 低代码/零代码快速开发平台,一直是近年来年很热的一个词,各大巨头的纷纷加入也给这个赛道增加了很多的活力,其中就包括阿里钉钉. 2021年1月,阿里发 ...
广州蓝景介绍 — 什么是“低代码开发平台”以及国内外最受欢迎的低代码平台
前言众所周知,国际知名的信息技术研究和分析公司Gartner曾预言,到2022年,50%以上的公司将采用低代码开发平台,来进行企业应用定制.以下是由广州蓝景介绍,国内外最受欢迎的低代码开发平台有哪些 ...
java免费低代码开发平台,steedos-platform
华炎魔方低代码开发平台华炎魔方是一款全新的低代码开发工具,开发人员只需编写配置文件,就能构建功能强大的管理软件. 数据建模创新的使用配置文件描述业务模型和业务功能,开发人员只需要编写简单的配置文件 ...
低代码开发平台_低代码开发平台测评——伙伴云
本次测评的产品严格来说不算低代码开发平台,它自己给自己的定位更多是全流程数据生产力平台.不过它依然具备应用搭建的关键要素,而且在数据管理方面还比较出彩,所以不能放过它--伙伴云,这款由Discuz! ...

在低代码中平台记录sortablejs拖拽使用经验

在低代码中平台记录sortablejs拖拽使用经验相关推荐

最新文章

热门文章