实现标签的拖拽功能

src/view/memberGroup/memberGroupEdit.vue

@@ -135,10 +135,10 @@ export default {
         selectedTags: [
           [
             // {
-            //   tagId: 1,
+            //   tagId: 'a',
             //   tagName: '有车一族',
             //   tagValue: '233',
-            //   newTagVal: '',
+            //   newTagVal: '233',
             //   tagParams: '',
             //   isActive: 0
             // }

src/view/memberGroup/tags-group-list.vue

@@ -15,6 +15,7 @@
       @delTagsGroup="delTagsGroup"
       @changeTagsGroupRelation="changeTagsGroupRelation"
       @checkTagsGroup="checkTagsGroup"
+      @dragTag="dragTag"
     />
     <el-button class="m-t-10 w-548 el-icon-plus color-blue add-group-btn" v-show="selectedTagsData.length < 3" @click="addTagsGroup">
       &nbsp;&nbsp;添加
@@ -59,6 +60,16 @@ export default {
     tagsGroup
   },
   methods: {
+    // 拖拽标签
+    dragTag(data) {
+      let { fromTagsGroupIndex, fromTagIndex, toTagsGroupIndex, toTagIndex } = { ...data };
+      let tagData = this.selectedTagsData[fromTagsGroupIndex].splice(fromTagIndex, 1)[0];
+      if (this.selectedTagsData[toTagsGroupIndex].length === toTagIndex) {
+        this.selectedTagsData[toTagsGroupIndex].push(tagData);
+      } else {
+        this.selectedTagsData[toTagsGroupIndex].splice(toTagsGroupIndex, 1, this.selectedTagsData[toTagsGroupIndex][toTagIndex], tagData);
+      }
+    },
     // 添加一个标签组，最多只能有3个标签组
     addTagsGroup() {
       if (this.selectedTagsData.length < 3) {

src/view/memberGroup/tags-group.vue

@@ -18,12 +18,14 @@
       </el-dropdown>
       <!--展示选中的标签-->
       <div class="tags-group__show">
-        <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>
-          <i class="el-icon-edit" @click="editTags(index)"></i>
-          <i class="el-icon-error" @click="delTags(index)"></i>
-        </div>
+        <draggable :options="{ group: 'article' }" style="height: 100%" @end="dragTag" :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>
+            <i class="el-icon-edit" @click="editTags(index)"></i>
+            <i class="el-icon-error" @click="delTags(index)"></i>
+          </div>
+        </draggable>
       </div>
     </div>
     <!--标签组之间的关系-->
@@ -52,8 +54,12 @@
  *  @editTags 编辑一个标签，将会emit(editTags事件, {tagsGroupIndex: 当前标签组的索引, tagIndex: 当前标签的索引})
  *  @changeTagsGroupRelation 切换与下一组标签之间的关系，将会emit(changeTagGroupRelation事件)
  * */
+import draggable from 'vuedraggable';
 export default {
   name: 'tags-group',
+  components: {
+    draggable
+  },
   props: {
     // 一组标签（选中的）的数据
     tagsData: Array,
@@ -112,6 +118,15 @@ export default {
       this.$emit('checkTagsGroup', {
         tagsGroupIndex: this.tagsGroupIndex
       });
+    },
+    // 拖拽标签
+    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'))
+      });
     }
   }
 };