update: 集成好vuedraggable

src/components/AttributeInput.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card class="attribute-container">
 
-    <div style="text-algin: center;">
+    <div style="text-align: center;">
       <el-switch v-model="editMode" active-text="自由编辑" inactive-text="约束编辑" active-color="#13ce66"
         inactive-color="#13ce66">
       </el-switch>
@@ -197,7 +197,7 @@ export default {
     },
     copyBro() {
       copyBroCode(this.__rawVueInfo__);
-      this.$emit('codeRefresh');
+      this.$store.commit('onDragEnd');
     },
     onShow() {
       // 这种方式适用于常规模式下的初始化，因为这个实例初始化后不会被销毁，一直常驻内存。但又不能受到其它实例销毁时的影响，所以需要明确的再次初始化。

src/components/CodeStructure.vue

@@ -2,7 +2,7 @@
   <el-drawer v-model="drawer" :with-header="false" size="70%" direction="btt">
     <div class="container">
 
-      <div style="text-algin: center;">组件结构检视图
+      <div style="text-align: center;">组件结构检视图
         <br>
         <span style="font-size:12px;">Components
           Structure</span>
@@ -12,26 +12,13 @@
         <el-col :span="16" style="height: 100%;">
           <div style="overflow: scroll;height:100%; margin: 0 20px;padding: 10px;">
 
-            <!-- <vue-nestable v-model="treeData" @change="onLevelChange">
-              <template v-slot="{ item }">
-                <vue-nestable-handle :item="item">
-                  <el-icon class="icon-s"><rank /></el-icon>
-                </vue-nestable-handle>
-
-                <span @click="onNodeClick(item)">{{ item.text }}</span>
-              </template>
-
-              <template v-slot:placeholder>
-                <div><b>The editor is empty.</b></div>
-              </template>
-            </vue-nestable> -->
+            <nested-draggable :data="treeData" />
 
           </div>
         </el-col>
         <el-col :span="8">
-          <attribute-input ref="attributeInput" :enableRemoveButton="true" v-if="currentEditRawInfo && drawer"
-            @save="onSaveAttr" shortcutInitMode="auto" @remove="onRemove" @codeRefresh="codeRefresh"
-            :__rawVueInfo__="currentEditRawInfo">
+          <attribute-input ref="attributeInput" :enableRemoveButton="true" v-if="currentEditRawInfo" @save="onSaveAttr"
+            shortcutInitMode="auto" @remove="onRemove" :__rawVueInfo__="currentEditRawInfo">
           </attribute-input>
         </el-col>
       </el-row>
@@ -41,81 +28,33 @@
 </template>
 
 <script>
-import "./halower-tree.min.css";
-import "@/assets/nestable.css"
 import { isObject, getRawComponentKey, getRawComponentContent } from "@/utils/common";
-// import { VueNestable, VueNestableHandle } from 'vue-nestable';
+import nestedDraggable from './nested.vue'
+import { defineAsyncComponent } from 'vue'
 
 export default {
   props: ['visible'],
-  emits: ['codeRefresh', 'onLevelChange', 'remove', 'save', 'update:visible'],
+  emits: ['onLevelChange', 'remove', 'save', 'update:visible', 'reRender'],
   components: {
-    AttributeInput: resolve => { require(["./AttributeInput"], resolve) },
-    // VueNestable,
-    // VueNestableHandle
+    AttributeInput: defineAsyncComponent(() => import("@/components/AttributeInput.vue")),
+    nestedDraggable
   },
 
   data() {
     return {
       // 在此自动生成
       treeData: [],
-      currentEditRawInfo: null
     };
   },
   beforeCreate() { },
   created() { },
   beforeMount() { },
-  mounted() { },
+  mounted() {
+  },
   beforeUpdate() { },
   updated() { },
   destoryed() { },
   methods: {
-    // 在此自动生成
-    request() {
-      // 网络请求，可选
-    },
-    codeRefresh() {
-      this.$emit('codeRefresh');
-    },
-    onLevelChange(value, options) {
-      this.$emit('onLevelChange', value.id, options.pathTo);
-    },
-
-    convertStructure(rawInfo) {
-      const title = getRawComponentKey(rawInfo);
-      const object = rawInfo[title];
-      const children = [];
-      if (isObject(object)) {
-        for (const key in object) {
-          if (object.hasOwnProperty(key)) {
-            if (key === '__children') {
-              const element = object[key];
-
-              element.forEach(item => {
-                const temp = this.convertStructure(item);
-                temp && children.push(temp);
-              })
-            } else if (isObject(object[key])) {
-              // 组成一个新的结构，适配只有一个子节点的数据结构
-              const __obj = {};
-              __obj[key] = object[key];
-              const child = this.convertStructure(__obj);
-              child && children.push(child);
-            }
-          }
-        }
-
-        return {
-          text: title,
-          expanded: true,
-          children: children,
-          rawInfo: rawInfo,
-          id: getRawComponentContent(rawInfo).lc_id
-        }
-      } else {
-        return null;
-      }
-    },
 
     onNodeClick(nodeInfo) {
       this.currentEditRawInfo = nodeInfo.rawInfo;
@@ -131,12 +70,17 @@ export default {
     },
 
     updateCode(codeRawInfo) {
-      this.treeData = [this.convertStructure(codeRawInfo)];
+      this._codeRawInfo = codeRawInfo;
+      const content = getRawComponentContent(codeRawInfo);
+      const children = content.__children;
+      this.treeData = children;
     },
 
   },
   watch: {
-    canInitShortcut(newValue) {
+    renderCount(){
+      // 这里利用了vuedraggable v-model的特性，它会更改对象本身的引用
+      this.$emit('reRender', this._codeRawInfo);
     }
   },
   computed: {
@@ -148,8 +92,21 @@ export default {
         this.$emit('update:visible', false);
       }
     },
+
+    renderCount(){
+      return this.$store.state.renderCount;
+    },
+
     canInitShortcut() {
       return this.currentEditRawInfo !== null && this.drawer;
+    },
+    currentEditRawInfo() {
+      if (this.$store.state.currentEditComp) {
+        const vccData = this.$store.state.currentEditComp.vccData;
+        return window.tree[vccData.lc_id];
+      } else {
+        return null;
+      }
     }
   },
   fillter: {},

src/components/nested.vue

@@ -0,0 +1,89 @@
+<template>
+  <draggable class="dragArea" tag="ul" :list="data" @start="onStartDrag" @choose="onClick"
+    @end="onEndDrag">
+    <template #item="{ element }">
+      <li class="itemArea">
+        <p>{{ getRawComponentKey(element) }}</p>
+        <nested-draggable :data="getRawComponentContent(element).__children" />
+      </li>
+    </template>
+  </draggable>
+</template>
+<script>
+import draggable from "vuedraggable";
+import { getRawComponentKey, getRawComponentContent } from "@/utils/common";
+
+export default {
+  props: {
+    data: {
+      required: true,
+      type: Array
+    }
+  },
+  data() {
+    return {
+    }
+  },
+
+  computed: {
+  },
+  methods: {
+    getRawComponentKey, 
+    getRawComponentContent,
+    onStartDrag(event) {
+      event.item.classList.add("is-dragging");
+    },
+    onClick(event) {
+      if(this.$store.state.currentEditComp){
+        this.$store.state.currentEditComp.item.classList.remove("is-dragging");
+      }
+
+      event.item.classList.add("is-dragging");
+
+      event.vccData = getRawComponentContent(this.data[event.oldIndex]);
+      this.$store.commit('storeCurrentEditComp', event);
+    },
+    onEndDrag(event) {
+      event.item.classList.remove("is-dragging");
+
+      this.$store.commit('onDragEnd');
+    }
+  },
+
+  components: {
+    draggable
+  },
+  name: "nested-draggable"
+};
+</script>
+<style scoped lang="scss">
+.dragArea {
+  min-height: 20px;
+  border: 1px dashed rgb(126, 126, 128);
+  border-radius: 5px;
+  padding-inline-start: 30px;
+  padding-right: 2px;
+  padding-bottom: 2px;
+}
+
+p {
+  margin: 10px 0;
+}
+
+.itemArea {
+  min-height: 20px;
+  border: 1px dashed rgb(126, 126, 128);
+  padding-right: 2px;
+  padding-bottom: 2px;
+  border-radius: 5px;
+  padding-inline-start: 10px;
+  margin: 10px 0 0;
+}
+
+.is-dragging {
+  background-color: rgba(106, 127, 233, 0.274);
+  border: 1px dashed rgb(73, 100, 241);
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+</style>