实现了基本的通过拖拽变更结构的能力

src/assets/nestable.css

@@ -0,0 +1,106 @@
+/*
+* Style for nestable
+*/
+.nestable {
+  position: relative;
+}
+
+.nestable-rtl {
+  direction: rtl;
+}
+
+.nestable .nestable-list {
+  margin: 0;
+  padding: 0 0 0 40px;
+  list-style-type: none;
+}
+
+.nestable-rtl .nestable-list {
+  padding: 0 40px 0 0;
+}
+
+.nestable>.nestable-list {
+  padding: 0;
+}
+
+.nestable-item,
+.nestable-item-copy {
+  margin: 10px 0 0;
+}
+
+.nestable-item:first-child,
+.nestable-item-copy:first-child {
+  margin-top: 0;
+}
+
+.nestable-item .nestable-list,
+.nestable-item-copy .nestable-list {
+  margin-top: 10px;
+}
+
+.nestable-item {
+  position: relative;
+}
+
+.nestable-item.is-dragging .nestable-list {
+  pointer-events: none;
+}
+
+.nestable-item.is-dragging * {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+
+.nestable-item.is-dragging:before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(106, 127, 233, 0.274);
+  border: 1px dashed rgb(73, 100, 241);
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+.nestable-drag-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.nestable-rtl .nestable-drag-layer {
+  left: auto;
+  right: 0;
+}
+
+.nestable-drag-layer>.nestable-list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  background-color: rgba(106, 127, 233, 0.274);
+}
+
+.nestable-rtl .nestable-drag-layer>.nestable-list {
+  padding: 0;
+}
+
+.nestable [draggable="true"] {
+  cursor: move;
+}
+
+.nestable-handle {
+  display: inline;
+}
+
+.expandable .has-children ol {
+  display: none;
+}
+
+.expandable .has-children.is-active>ol {
+  display: block;
+}

src/components-v2/VCC.vue

@@ -38,7 +38,7 @@
       <lc-code :rawCode="code" :codeDialogVisible.sync="codeDialogVisible">
       </lc-code>
       <code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" :visible.sync="structureVisible"
-        @codeRefresh="generateVueCode">
+        @codeRefresh="generateVueCode" @onLevelChange="onLevelChange">
       </code-structure>
     </div>
 
@@ -55,6 +55,7 @@ import { splitInit } from "../libs/split-init";
 import { MainPanelProvider } from "../libs/main-panel";
 import ToolsBar from "./ToolsBar";
 import { initContainerForLine } from "@/utils/lineHelper";
+
 const keymaster = require('keymaster');
 
 import AttributeInput from "../components/AttributeInput";
@@ -207,6 +208,11 @@ export default {
     onSaveAttr({ resultList, lc_id }) {
       this.mainPanelProvider.saveAttribute(resultList, lc_id);
     },
+
+    onLevelChange(removeID, movePath){
+      this.mainPanelProvider.onLevelChange(removeID, movePath);
+    },
+
     generateVueCode() { },
     onRemove({ lc_id }) {
       this.mainPanelProvider.remove(lc_id);

src/components/CodeStructure.vue

@@ -11,8 +11,21 @@
       <el-row :gutter="20" style="height:0px;flex-grow:1;">
         <el-col :span="16" style="height: 100%;">
           <div style="overflow: scroll;height:100%; margin: 0 20px;padding: 10px;">
-            <v-tree :radio="true" :canDeleteRoot="false" :data='treeData' :draggable='false' :halfcheck='false'
-              :multiple="false" @node-click="onNodeClick" />
+
+            <vue-nestable v-model="treeData" @change="onLevelChange">
+              <template slot-scope="{ item }">
+                <vue-nestable-handle :item="item">
+                  拖
+                </vue-nestable-handle>
+
+                <span @click="onNodeClick(item)">{{ item.text }}</span>
+              </template>
+
+              <div slot="placeholder">
+                <b>The editor is empty.</b>
+              </div>
+            </vue-nestable>
+
           </div>
         </el-col>
         <el-col :span="8">
@@ -29,14 +42,15 @@
 
 <script>
 import "./halower-tree.min.css";
-import { VTree } from '@/libs/v2-tree'
-import { isObject } from "@/utils/common";
+import { isObject, getRawComponentKey, getRawComponentContent } from "@/utils/common";
+import { VueNestable, VueNestableHandle } from 'vue-nestable';
 
 export default {
   props: ['visible'],
   components: {
-    VTree,
     AttributeInput: resolve => { require(["./AttributeInput"], resolve) },
+    VueNestable,
+    VueNestableHandle
   },
 
   data() {
@@ -61,14 +75,12 @@ export default {
     codeRefresh() {
       this.$emit('codeRefresh');
     },
-
-    // 获取这个节点的key
-    getRawComponentKey(__rawVueInfo__) {
-      return Object.keys(__rawVueInfo__)[0];
+    onLevelChange(value, options) {
+      this.$emit('onLevelChange', value.id, options.pathTo);
     },
 
     convertStructure(rawInfo) {
-      const title = this.getRawComponentKey(rawInfo);
+      const title = getRawComponentKey(rawInfo);
       const object = rawInfo[title];
       const children = [];
       if (isObject(object)) {
@@ -92,10 +104,11 @@ export default {
         }
 
         return {
-          title: title,
+          text: title,
           expanded: true,
           children: children,
           rawInfo: rawInfo,
+          id: getRawComponentContent(rawInfo).lc_id
         }
       } else {
         return null;

src/libs/main-panel.js

@@ -211,7 +211,7 @@ export class MainPanelProvider {
 
         // 拖入预览容器释放时的处理
         renderControlPanel.addEventListener("drop", (event) => {
-            if(!this.currentPointDropInfo.target){
+            if (!this.currentPointDropInfo.target) {
                 return;
             }
 
@@ -356,11 +356,39 @@ export class MainPanelProvider {
         return this;
     }
 
+    /**
+     * 移动一个节点到另一个节点
+     * @param {*} removeID 被移动的节点
+     * @param {*} movePath 移动的路径
+     */
+    onLevelChange(removeID, movePath) {
+        this.backup();
+
+        const removedNodeArray = this.remove(removeID, false);
+        // 去除根节点路径，以便完全匹配
+        movePath.splice(0, 1)
+
+        let rootNode = this._rawDataStructure;
+        let lastIndex = -1;
+        for (let i = 0; i < movePath.length - 1; i++) {
+            rootNode = getRawComponentContent(rootNode).__children[movePath[i]];
+            lastIndex = movePath[i + 1];
+        }
+
+        if (rootNode && removedNodeArray.length > 0) {
+            getRawComponentContent(rootNode).__children.splice(lastIndex, 0, removedNodeArray[0]);
+        }
+
+        // 渲染当前的变更
+        this.render(this._rawDataStructure);
+    }
+
     /**
      * 移除一个节点
      * @param {*} lc_id 
      */
-    remove(lc_id) {
+    remove(lc_id, backup = true) {
+        let removeNodes = null;
         const readyForDeleteElement = document.querySelector(`[lc_id="${lc_id}"]`);
         if (readyForDeleteElement) {
             const parentElementNode = findCodeElemNode(readyForDeleteElement.parentElement);
@@ -376,8 +404,8 @@ export class MainPanelProvider {
                         return getRawComponentContent(item).lc_id == lc_id;
                     });
 
-                    this.backup();
-                    childrenArray.splice(index, 1);
+                    backup && this.backup();
+                    removeNodes = childrenArray.splice(index, 1);
                     this.eventEmitter.emit("onNodeDeleted");
 
                     // 渲染当前的变更
@@ -391,6 +419,8 @@ export class MainPanelProvider {
         } else {
             console.warn(`没有发现lc_id: ${lc_id}所对应的Dom节点`);
         }
+
+        return removeNodes;
     }
 
     /**

src/main.js

@@ -6,6 +6,8 @@ import AntdUI from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
 import APP from "./App.vue";
 
+import "./assets/nestable.css"
+
 Vue.use(ElementUI);
 Vue.use(AntdUI);