vue折叠面板可拖动样式

要实现可拖动的vue折叠面板，需要先引入一个支持拖动排序的库，例如`Sortable.js`，然后再结合CSS样式来实现。

这里提供一个示例代码，仅供参考：

<template>
  <div class="panel-group">
    <div v-for="(item, index) in items" :key="item.id" class="panel" :data-id="index">
      <div class="panel-heading" @click="toggle(index)">
        {{ item.title }}
      </div>
      <div class="panel-collapse" :class="{ 'in': item.open }">
        <div class="panel-body">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      items: [
        {
          id: 1,
          title: '折叠面板1',
          content: '折叠面板1的内容',
          open: false
        },
        {
          id: 2,
          title: '折叠面板2',
          content: '折叠面板2的内容',
          open: false
        },
        {
          id: 3,
          title: '折叠面板3',
          content: '折叠面板3的内容',
          open: false
        }
      ]
    }
  },
  mounted() {
    // 初始化拖拽排序
    const el = document.querySelector('.panel-group')
    Sortable.create(el, {
      animation: 150,
      handle: '.panel-heading',
      onEnd: evt => {
        const newIndex = evt.newIndex
        const oldIndex = evt.oldIndex
        const item = this.items.splice(oldIndex, 1)[0]
        this.items.splice(newIndex, 0, item)
      }
    })
  },
  methods: {
    toggle(index) {
      this.items[index].open = !this.items[index].open
    }
  }
}
</script>

<style>
.panel-group {
  margin-bottom: 20px;
}

.panel {
  margin-bottom: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.panel-heading {
  cursor: pointer;
  background-color: #f5f5f5;
}

.panel-heading:hover {
  background-color: #ddd;
}

.panel-collapse {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

.panel-collapse.in {
  height: auto;
  overflow: visible;
}

.panel-body {
  padding: 15px;
}
</style>

在这个示例中，我们使用了`Sortable.js`库来实现拖拽排序，然后在`mounted`钩子函数中初始化拖拽排序。同时，我们也定义了CSS样式来美化折叠面板的样式，包括折叠面板的背景色、边框、阴影、标题的样式等等。