vue drawer 拖拽

在Vue中实现Drawer的拖拽功能可以借助第三方库来实现，比如Vue.Draggable或者Vue2Draggable。

首先，你需要安装相应的库。使用npm或者yarn命令来安装：

npm install vuedraggable

或者

yarn add vuedraggable

然后，在你的Vue组件中引入Draggable组件并使用它来包裹你的Drawer组件：

<template>
  <div>
    <draggable v-model="drawers" :options="draggableOptions">
      <div v-for="(drawer, index) in drawers" :key="index">
        <drawer :content="drawer.content"></drawer>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import Drawer from './Drawer.vue';

export default {
  components: {
    draggable,
    Drawer
  },
  data() {
    return {
      drawers: [
        { content: 'Drawer 1' },
        { content: 'Drawer 2' },
        { content: 'Drawer 3' }
      ],
      draggableOptions: {
        handle: '.drag-handle' // 指定拖拽的手柄元素
      }
    };
  }
};
</script>

在上面的例子中，我们使用了Vue.Draggable库，并在data中定义了drawers数组来存储所有的Drawer内容。在模板中，我们使用v-for指令来遍历drawers数组，并使用Drawer组件来渲染每个Drawer的内容。

注意，我们还定义了draggableOptions对象来指定拖拽的手柄元素，这样只有在手柄元素上拖拽才会触发拖拽功能。

最后，你需要在Drawer组件中添加一个drag-handle类的元素来作为拖拽的手柄：

<template>
  <div>
    <div class="drag-handle">拖拽手柄</div>
    <div class="drawer-content">{{ content }}</div>
  </div>
</template>

<script>
export default {
  props: ['content']
};
</script>

以上是一个简单的实现Drawer拖拽功能的示例，你可以根据自己的需求进行修改和扩展