|
@@ -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;
|