vue3 可拖动的进度条

Vue3 可拖动的进度条通常通过使用第三方库 Vue draggable 或者 Element UI 的 draggable 组件来实现。这些组件允许你在 Vue 界面上创建交互式的拖动元素，例如进度条。

Vue draggable 提供了一种简单的方式来添加拖放功能，它允许开发者自定义拖动行为，并可以轻松地绑定到数据模型上，当进度条被拖动时，会实时更新对应的值。

Element UI 的 draggable 功能则集成在它的 UI 组件中，如 `el-progress` 进度条，你可以将其设置为可拖动状态，用户拖动时其值会随之改变。

以下是基本的步骤：

1. 安装依赖：使用 npm 或 yarn 安装相应的库，如 `npm install vuedraggable` 或 `yarn add vuedraggable`。

2. 在模板中引入并使用组件：例如，Vue draggable 需要在模板中这样使用：

<template>
  <vuedraggable :items="progressItems" @start="handleStart" @end="handleEnd">
    <div class="progress-item" v-for="(item, index) in progressItems" :key="index" :data-index="index">
      <el-progress type="circle" :percentage="item.percentage"></el-progress>
    </div>
  </vuedraggable>
</template>

<script>
import { Draggable } from 'vuedraggable'
export default {
  components: {
    Draggable,
  },
  data() {
    return {
      progressItems: [
        { percentage: 50 },
        // 其他进度条配置项...
      ]
    }
  },
  methods: {
    handleStart(e, item) {
      // 开始拖动事件处理
    },
    handleEnd(e, item) {
      // 结束拖动事件处理，更新 item.percentage
    }
  }
}
</script>