Vue.js 实现带拖动功能的时间轴

实现带拖动功能的时间轴可以借助 Vue.js 的指令和事件绑定来完成。以下是一个简单的实现示例：

1. 安装依赖

首先需要安装依赖，包括 Vue.js 和一个支持拖拽的库，比如 Sortable.js。

npm install vue sortablejs --save

2. 创建组件

创建一个时间轴组件，在其中引入 Sortable.js 和 Vue 的指令。

<template>
  <div class="timeline">
    <div class="timeline__item" v-for="item in items" :key="item.id" :data-id="item.id" :style="{ left: item.left + 'px' }">
      {{ item.date }} - {{ item.title }}
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  name: 'Timeline',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  mounted() {
    const el = this.$el;

    // 初始化 Sortable.js 实例
    new Sortable(el, {
      draggable: '.timeline__item',
      onEnd: this.onEnd
    });
  },
  methods: {
    onEnd(event) {
      // 获取当前元素的位置信息
      const id = event.item.getAttribute('data-id');
      const index = Array.from(event.to.children).indexOf(event.item);
      const left = event.item.offsetLeft;

      // 调用父组件的方法更新数据
      this.$emit('update-item', { id, index, left });
    }
  }
};
</script>

3. 使用组件

在父组件中使用时间轴组件，并传入需要显示的数据。

<template>
  <div>
    <timeline :items="items" @update-item="updateItem"></timeline>
  </div>
</template>

<script>
import Timeline from './Timeline.vue';

export default {
  components: { Timeline },
  data() {
    return {
      items: [
        { id: 1, date: '2021-01-01', title: 'Event 1', left: 0 },
        { id: 2, date: '2021-02-01', title: 'Event 2', left: 200 },
        { id: 3, date: '2021-03-01', title: 'Event 3', left: 400 },
        { id: 4, date: '2021-04-01', title: 'Event 4', left: 600 },
        { id: 5, date: '2021-05-01', title: 'Event 5', left: 800 }
      ]
    };
  },
  methods: {
    updateItem({ id, index, left }) {
      // 更新对应的数据项的位置信息
      const item = this.items.find(item => item.id === Number(id));
      item.left = left;

      // 移动数据项的位置
      this.items.splice(index, 0, this.items.splice(this.items.indexOf(item), 1)[0]);
    }
  }
};
</script>

通过以上代码，可以实现一个简单的带拖动功能的时间轴。用户可以通过鼠标拖动时间轴上的事件，改变事件的位置和顺序。