vuedraggable 拖拽时由阴影

vuedraggable 是一个基于 Vue.js 的拖拽组件，可以实现拖拽排序等功能。在拖拽时，可以设置阴影效果，让用户更加清楚地看到拖拽的位置。

要使用阴影效果，需要在 vuedraggable 组件中设置 drag-class 属性，并在 CSS 中定义相关的样式。例如：

<template>
  <draggable v-model="list" :drag-class="'dragging'" @end="onDragEnd">
    <div v-for="item in list" :key="item.id">{{ item.text }}</div>
  </draggable>
</template>

<style>
.dragging {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>

在上面的代码中，我们在 draggable 组件中设置了 drag-class 属性，并将其设置为 'dragging'。这样在拖拽时，被拖拽的元素就会自动添加一个 dragging 的 class，我们可以在 CSS 中定义该类的样式，例如设置一个阴影效果。

需要注意的是，如果要使用 drag-class 属性，必须将 v-model 绑定的变量设置为一个数组，例如：

export default {
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};