使用vue-draggable拖拽折叠面板时将面板都改为折叠状态

EIERICA

已于 2024-01-22 09:21:07 修改

阅读量814

点赞数 7

文章标签： vue.js javascript 前端

于 2024-01-16 15:01:36 首次发布

本文链接：https://blog.csdn.net/EIERICA/article/details/135603815

版权

文章介绍了如何在Vue项目中实现一个可拖拽排序的折叠面板，解决分组内容过长导致拖拽过程中展开影响视觉的问题。通过监听`dragstart`事件，控制面板在拖拽开始时折叠，并在拖动过程中仅显示折叠状态的面板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有这么一个需求，使用折叠面板进行分组展示，分组可以拖拽排序，由于分组的内容可能很长，拖拽过程展开的话会影响视觉效果，所以在拖拽的过程中将面板全部折叠。

可以想到的是
1.在拖拽开始时，将el-collapse的所有面板折叠起来
解决方法：
draggable组件有start事件，但是在这里折叠面板已经晚了，拖拽已经开始了。所以监听dom节点的原生@dragstart事件，在这里折叠面板。

<template>
   <el-collapse v-model="activeGroups" class="mp-monitor-classify__collapse" v-loading="loading">
      <template v-if="classifyGroup.length">
        <draggable
          v-model="classifyGroup"
          :animation="200"
          handle=".group-handle"
          tag="div"
          draggable=".drag-list-item"
          @change="handleGroupDragChange"
          chosen-class="drag-list-chosen"
        >
          <el-collapse-item
            v-for="(group, index) in classifyGroup"
            :name="group.resourceDetectionCategoryId"
            :key="group.resourceDetectionCategoryId"
            class="drag-list-item"
            @dragstart.native="handleGroupDragStart"
          >
           内容。。。
          </el-collapse-item>
        </draggable>
      </template>
      <template v-else>
        <div class="mp_tatble_nodata">
          <img class="mp_noData_image" :src="themeName === 'eveningTheme' ? '/img/dark_no_data.png' : '/asset_file/image/noData.svg'" alt />
          <p class="mp_tatble_txt">暂无数据</p>
        </div>
      </template>
    </el-collapse>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable,
  },
  data() {
    return {
      expandAll: false,
      classifyGroup: [], // 分类分组
      activeGroups: [],
      loading: false
    }
  },
  async mounted() {
    this.expandAll = true
    this.activeGroups = this.classifyGroup.map((group) => group.resourceDetectionCategoryId)
  },
  watch: {
    activeGroups: {
      deep: true,
      handler(val) {
        if(val.length > 0) {
          if (val.length < this.classifyGroup.length) this.expandAll = false
          if (val.length === this.classifyGroup.length) this.expandAll = true
        }
      },
    },
  },
  methods: {
    /**
     * 分类拖拽排序start
     */
    handleGroupDragStart(e) {
      if (!e.target.className.includes('drag-list-item')) return
      this.activeGroups = []
      e.target.getElementsByClassName('el-collapse-item__wrap')[0].style.display = 'none'
    },
  },
}
</script>