vue2 24小时可拖动进度条

您可以使用Vue2的拖动库vue-draggable-resizable，该库提供了可拖动和可缩放的元素，并且可以非常方便地集成到您的Vue2项目中。

以下是步骤：

1. 安装vue-draggable-resizable库：

npm install vue-draggable-resizable

2. 在您的Vue组件中引入该库：

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

3. 在您的Vue组件中使用VueDraggableResizable组件：

<vue-draggable-resizable :x="0" :y="0" :w="200" :h="20" :parent="true" :grid="[1, 1]" @dragging="onDragging">
  <div class="progress-bar"></div>
</vue-draggable-resizable>

在上面的示例中，我们创建了一个可拖动和可缩放的进度条。您可以通过设置`x`和`y`属性来设置进度条的位置，通过设置`w`属性来设置进度条的宽度，通过设置`h`属性来设置进度条的高度。

4. 在您的Vue组件的`methods`中定义`onDragging`方法：

methods: {
  onDragging: function (event, {x, y}) {
    // 在这里更新进度条的值
  }
}

在上面的示例中，我们定义了一个`onDragging`方法，该方法会在进度条被拖动时被调用。在这个方法中，你可以更新进度条的值。

总之，您可以使用vue-draggable-resizable库来创建一个可拖动和可缩放的进度条，然后在进度条被拖动时更新进度条的值。