两个相同类型的标签不能拖动到同一个框中

src/view/memberGroup/tags-group.vue

@@ -18,7 +18,7 @@
       </el-dropdown>
       <!--展示选中的标签-->
       <div class="tags-group__show">
-        <draggable group="article" style="height: 100%" @end="dragTag" :data-index="tagsGroupIndex">
+        <draggable v-model="tagsData" group="article" style="height: 100%" @end="dragTag" :move="checkMove" :data-index="tagsGroupIndex">
           <div class="tags-group__tag" v-for="(item, index) in tagsData" :key="item.tagId">
             <span>{{ item.tagName }}</span>
             <span class="tags-group__tag-name">【选择:{{ item.newTagVal }}】</span>
@@ -77,7 +77,8 @@ export default {
   data() {
     return {
       // 确认删除标签组的弹窗
-      showDelPop: false
+      showDelPop: false,
+      changed: false
     };
   },
   methods: {
@@ -121,12 +122,20 @@ export default {
     },
     // 拖拽标签
     dragTag(evt) {
-      this.$emit('dragTag', {
-        fromTagIndex: evt.oldIndex,
-        toTagIndex: evt.newIndex,
-        fromTagsGroupIndex: parseInt(evt.from.getAttribute('data-index')),
-        toTagsGroupIndex: parseInt(evt.to.getAttribute('data-index'))
-      });
+      if (this.changed) {
+        this.$emit('dragTag', {
+          fromTagIndex: evt.oldIndex,
+          toTagIndex: evt.newIndex,
+          fromTagsGroupIndex: parseInt(evt.from.getAttribute('data-index')),
+          toTagsGroupIndex: parseInt(evt.to.getAttribute('data-index'))
+        });
+      }
+    },
+    checkMove(evt) {
+      const relatedList = evt.relatedContext.list;
+      const draggedElement = evt.draggedContext.element;
+      this.changed = !relatedList.some(item => item.tagId === draggedElement.tagId);
+      return this.changed;
     }
   }
 };
@@ -230,17 +239,17 @@ export default {
     left: 15px;
     z-index: 1;
     width: 40px;
-    height: 80px;
+    height: 60px;
     border-left: 1px solid #dcdfe6;
   }
 
   &::before {
-    top: -85px;
+    top: -65px;
     border-top: 1px solid #dcdfe6;
   }
 
   &::after {
-    bottom: -85px;
+    bottom: -65px;
     border-bottom: 1px solid #dcdfe6;
   }
 }