Browse Source

编辑器-导航:增大拖拽热区范围,拖拽时的图像按照设计稿实现。

任一存 2 years ago
parent
commit
b9fe9214ef

+ 6 - 2
packages/qjkankan-editor/src/components/insertPositionTipInEditor.vue

@@ -420,8 +420,12 @@ export default {
 .insert-position-tip {
   height: 1px;
   box-sizing: content-box;
-  padding-top: 3px;
-  padding-bottom: 3px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: -5px;
+  margin-bottom: -5px;
+  position: relative;
+  z-index: 1;
   background-clip: content-box;
   color: transparent;
   // background-color: red;

+ 19 - 1
packages/qjkankan-editor/src/components/sceneGroupInEditor.vue

@@ -15,6 +15,9 @@
         paddingLeft: topBarPaddingLeft,
       }"
     >
+      <div class="drag-image" ref="drag-image">
+        <i class="iconfont icon-editor_folder_off"></i>
+      </div>
       <i class="iconfont icon-edit_input_arrow icon-expand" :class="isExpanded ? '' : 'collapsed'"></i>
       <i v-show="isExpanded" class="iconfont icon-editor_folder_on folder_expanded"></i>
       <i v-show="!isExpanded" class="iconfont icon-editor_folder_off folder_collapsed"></i>
@@ -335,7 +338,7 @@ export default {
     onDragStart(e) {
       this.recordDragType(`topologyGroupLevel${this.level}`)
       this.recordDragNode(this.groupNode)
-      // e.dataTransfer.setDragImage(e.target.children[1], -10, -18)
+      e.dataTransfer.setDragImage(this.$refs['drag-image'], -10, -18)
     },
     onDragEnter(e) {
       if (e.target.contains(e.relatedTarget) || (this.level === 2 && this.dragInfo.type.includes('Group'))) {
@@ -391,6 +394,21 @@ export default {
         display: block;
       }
     }
+    > .drag-image {
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      background: #313131;
+      box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: -1;
+      i {
+        font-size: 16px;
+      }
+    }
     > .icon-expand {
       display: inline-block;
       font-size: 12px;

+ 25 - 1
packages/qjkankan-editor/src/components/sceneInGroupInEditor.vue

@@ -6,6 +6,14 @@
     @dragend="clearDragInfo"
     draggable="true"
   >
+    <div class="drag-image" ref="drag-image">
+      <img
+        :src="sceneInfo.icon + ossImagePreviewUrlSuffix()"
+        alt=""
+        class="scene-image"
+        draggable="false"
+      >
+    </div>
     <img
       :src="sceneInfo.icon + ossImagePreviewUrlSuffix()"
       alt=""
@@ -81,7 +89,7 @@ export default {
     onDragStart(e) {
       this.recordDragType('scene')
       this.recordDragNode(this.sceneInfo)
-      e.dataTransfer.setDragImage(e.target.children[0], -10, -18)
+      e.dataTransfer.setDragImage(this.$refs['drag-image'], -10, -18)
     },
     ossImagePreviewUrlSuffix,
     translateSceneType(type) {
@@ -138,6 +146,22 @@ export default {
       display: block !important;
     }
   }
+  .drag-image {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    padding: 4px;
+    background: #313131;
+    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
+    position: absolute;
+    z-index: -1;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 2px;
+    }
+  }
   .scene-image {
     flex: 0 0 auto;
     width: 64px;