编辑器-导航-场景导航：拖拽场景分组与场景时，根据能否插入当前位置决定是否显示插入提示。

packages/code/src/Store/index.js

@@ -31,6 +31,12 @@ const store = new Vuex.Store({
     uploadStatusListImage: [],
     uploadStatusListPano: [],
     uploadStatusListVideo: [],
+
+    // 编辑器-导航-场景导航中，拖拽时要用到
+    editorNavDragInfo: {
+      type: '', // 'topologyGroupLevel1': 拓扑结构中一级分组；'topologyGroupLevel2': 拓扑结构中二级分组；'scene': 场景（全景图和三维场景）
+      node: {},
+    }
   },
   getters: {
     userAvatar: state => state.userAvatar,
@@ -90,6 +96,8 @@ const store = new Vuex.Store({
     uploadStatusListImage: state => state.uploadStatusListImage,
     uploadStatusListPano: state => state.uploadStatusListPano,
     uploadStatusListVideo: state => state.uploadStatusListVideo,
+
+    editorNavDragInfo: state => state.editorNavDragInfo,
   },
   mutations: {
     SetUserAvatar(state, avatar) {
@@ -146,8 +154,22 @@ const store = new Vuex.Store({
     },
     BackupHotSpot(state, data) {
       state.backupHotSpot = data
-    }
+    },
 
+    setEditorNavDragType(state, data) {
+      if (!['topologyGroupLevel1', 'topologyGroupLevel2', 'scene'].includes(data)) {
+        throw("拖拽类型必须是'topologyGroupLevel1', 'topologyGroupLevel2', 'scene'之一！")
+      }
+      state.editorNavDragInfo.type = data
+    },
+    setEditorNavDragNode(state, data) {
+      state.editorNavDragInfo.node = data
+    },
+    clearEditorNavDragInfo(state) {
+      console.log('clear drag info...');
+      state.editorNavDragInfo.type = ''
+      state.editorNavDragInfo.node = {}
+    }
   },
   actions: {
     refreshUserInfo(context) {

packages/code/src/components/insertPositionTipInEditor.vue

@@ -14,31 +14,126 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+
 export default {
   props: {
     positionDebug: {
       type: String,
       default: '',
     },
-    level: {
+    indentLevel: {
+      type: Number,
+      default: 1,
+    },
+    topologyLevel: {
       type: Number,
       default: 1,
     },
+    parentNode: {
+      type: Object,
+      default: null,
+    },
   },
   computed: {
+    ...mapGetters({
+      dragInfo: 'editorNavDragInfo',
+    }),
     marginLeft() {
-      return (this.level - 1) * 12 + 'px' 
+      return (this.indentLevel - 1) * 12 + 'px' 
     },
   },
   methods: {
+    canDrop() {
+      switch (this.dragInfo.type) {
+        case 'scene': // 被拖拽的是场景
+          if (this.topologyLevel === 1) {
+            console.log('情况1：被拖拽的是场景，拖拽到一级分组列表');
+            return false
+          } else if (this.topologyLevel === 2) {
+            console.log('情况2：被拖拽的是场景，拖拽到二级分组列表');
+            return false
+          } else if (this.topologyLevel === 3) {
+            console.log('情况3：被拖拽的是场景，拖拽到场景列表');
+            return true
+          } else {
+            console.error('情况4：不该出现');
+            return false
+          }
+        case 'topologyGroupLevel2': // 被拖拽的是拓扑结构中二级分组
+          if (this.topologyLevel === 1) {
+            console.log('情况5：被拖拽的是拓扑结构中二级分组，拖拽到一级分组列表');
+            return true
+          } else if (this.topologyLevel === 2) {
+            console.log('情况6：被拖拽的是拓扑结构中二级分组，拖拽到二级分组列表');
+            return true
+          } else if (this.topologyLevel === 3) {
+            if (this.indentLevel === 2) {
+              console.log('情况7：被拖拽的是拓扑结构中二级分组，拖拽到隐藏的默认二级分组中场景列表');
+              return true
+            } else {
+              console.log('情况8：被拖拽的是拓扑结构中二级分组，拖拽到普通的二级分组中场景列表');
+              return false
+            }
+          } else {
+            console.error('情况9：不该出现');
+            return false
+          }
+        case 'topologyGroupLevel1': // 被拖拽的是拓扑结构中一级分组
+          if (this.topologyLevel === 1) {
+            console.log('情况10：被拖拽的是拓扑结构中一级分组，拖拽到一级分组列表');
+            return true
+          } else if (this.topologyLevel === 2) { // 拖拽到二级分组列表
+            if (this.dragInfo.node.children.length === 1 && this.dragInfo.node.children[0].name === '默认二级分组') {
+              console.log('情况11：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到二级分组列表');
+              return true
+            } else {
+              console.log('情况12：被拖拽的一级分组并非只有一个隐藏的默认二级分组，拖拽到二级分组列表');
+              return false
+            }
+          } else if (this.topologyLevel === 3) { // 拖拽到场景列表
+            if (this.indentLevel === 2) { // 拖拽到隐藏的默认二级分组中的场景列表
+              if (this.dragInfo.node.children.length === 1 && this.dragInfo.node.children[0].name === '默认二级分组') {
+                if (this.dragInfo.node.children[0].id === this.parentNode?.id) {
+                  console.log('情况13：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到自身的默认二级分组中的场景列表');
+                  return false
+                } else {
+                  console.log('情况14：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到另一个一级分组中隐藏的默认二级分组中的场景列表');
+                  return true
+                }
+              } else {
+                console.log('情况15：被拖拽的一级分组并非只有一个隐藏的默认二级分组，拖拽到隐藏的默认二级分组中的场景列表');
+                return false
+              }
+            } else {
+              console.log('情况16：被拖拽的是拓扑结构中一级分组，拖拽到普通二级分组中的场景列表')
+              return false
+            }
+          } else {
+            console.error('情况17：不该出现');
+            return false
+          }
+        default:
+          console.error('情况18：不该出现');
+          return false
+      }
+    },
     onDragEnterMarginPlaceholder(e) {
-      e.preventDefault()
-      e.target.style.backgroundColor = '#0076f6'
-      e.dataTransfer.dropEffect = 'move'
+      if (!this.canDrop()) {
+        return
+      } else {
+        e.preventDefault()
+        e.target.style.backgroundColor = '#0076f6'
+        e.dataTransfer.dropEffect = 'move'
+      }
     },
     onDragOverMarginPlaceholder(e) {
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'move'
+      if (!this.canDrop()) {
+        return
+      } else {
+        e.preventDefault()
+        e.dataTransfer.dropEffect = 'move'
+      }
     },
     onDragLeaveMarginPlaceHolder(e) {
       // e.preventDefault()

packages/code/src/components/sceneGroupInEditor.vue

@@ -6,8 +6,9 @@
       class="top-bar"
       :class="isConfirmingDeletion ? '' : 'show-icons-on-hover'"
       @click="onClickTopBar"
-      @dragstart=onDragStartSceneGroup
-      @dragenter="onDragEnterSceneGroup"
+      @dragstart="onDragStart"
+      @dragenter="onDragEnter"
+      @dragend="clearDragInfo"
       draggable="true"
       :style="{
         paddingLeft: topBarPaddingLeft,
@@ -80,7 +81,9 @@
       <template v-if="!(groupNode.children.length === 1 && groupNode.children[0].name === '默认二级分组')">
         <InsertPositionTip
           position-debug="1"
-          :level="level + 1"
+          :indentLevel="level + 1"
+          :topologyLevel="level + 1"
+          :parentNode="groupNode"
         ></InsertPositionTip>
         <div
           v-for="(item) of groupNode.children"
@@ -107,7 +110,9 @@
           />
           <InsertPositionTip
             position-debug="2"
-            :level="level + 1"
+            :indentLevel="level + 1"
+            :topologyLevel="level + 1"
+            :parentNode="groupNode"
           ></InsertPositionTip>
         </div>
       </template>
@@ -115,7 +120,9 @@
         <!-- 自动生成的默认二级分组不显示，里边的内容显示成直属于一级分组的效果。 -->
         <InsertPositionTip
           position-debug="3"
-          :level="level + 1"
+          :indentLevel="level + 1"
+          :topologyLevel="level + 2"
+          :parentNode="groupNode.children[0]"
         ></InsertPositionTip>
         <div
           v-for="(item) of groupNode.children[0].children"
@@ -131,7 +138,9 @@
           />
           <InsertPositionTip
             position-debug="4"
-            :level="level + 1"
+            :indentLevel="level + 1"
+            :topologyLevel="level + 2"
+            :parentNode="groupNode.children[0]"
           ></InsertPositionTip>
         </div>
       </template>
@@ -154,7 +163,7 @@
 import SceneInGroup from "@/components/sceneInGroupInEditor.vue";
 import MaterialSelector from "@/components/materialSelectorForEditor.vue";
 import InsertPositionTip from "@/components/insertPositionTipInEditor.vue";
-import { mapGetters } from "vuex";
+import { mapGetters, mapMutations } from "vuex";
 
 export default {
   name: 'SceneGroup',
@@ -194,6 +203,11 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({
+      recordDragType: 'setEditorNavDragType',
+      recordDragNode: 'setEditorNavDragNode',
+      clearDragInfo: 'clearEditorNavDragInfo',
+    }),
     onClickTopBar() {
       if (this.isConfirmingDeletion) {
         return
@@ -306,12 +320,12 @@ export default {
         this.$msg.success("操作成功")
       }
     },
-    onDragStartSceneGroup(e) {
-      e.dataTransfer.setData("application/target-type", `scene-group-${this.level}`)
-      e.dataTransfer.setData("application/target-id", this.groupNode.id)
+    onDragStart(e) {
+      this.recordDragType(`topologyGroupLevel${this.level}`)
+      this.recordDragNode(this.groupNode)
       // e.dataTransfer.setDragImage(e.target.children[1], -10, -18)
     },
-    onDragEnterSceneGroup(e) {
+    onDragEnter(e) {
       if (!this.isExpanded) {
         this.isExpanded = true
         this.$bus.emit('scene-group-expanded', this.groupNode.id, this.level)

packages/code/src/components/sceneInGroupInEditor.vue

@@ -3,6 +3,7 @@
     class="scene-item"
     :class="isConfirmingDeletion ? '' : 'not-confirming-deletion'"
     @dragstart="onDragStart"
+    @dragend="clearDragInfo"
     draggable="true"
   >
     <img
@@ -50,6 +51,7 @@
 
 <script>
 import { ossImagePreviewUrlSuffix } from '@/utils/other.js'
+import { mapMutations } from "vuex";
 
 export default {
   name: 'SceneInGroupInEditor', 
@@ -68,10 +70,17 @@ export default {
       isConfirmingDeletion: false,
     }
   },
+  computed: {
+  },
   methods: {
+    ...mapMutations({
+      recordDragType: 'setEditorNavDragType',
+      recordDragNode: 'setEditorNavDragNode',
+      clearDragInfo: 'clearEditorNavDragInfo',
+    }),
     onDragStart(e) {
-      e.dataTransfer.setData("application/target-type", `scene`)
-      e.dataTransfer.setData("application/target-id", this.sceneInfo.id)
+      this.recordDragType('scene')
+      this.recordDragNode(this.sceneInfo)
       e.dataTransfer.setDragImage(e.target.children[0], -10, -18)
     },
     ossImagePreviewUrlSuffix,