当前位置：首页 > VUE

vue日历拖拽实现

2026-02-19 16:40:52VUE

Vue 日历拖拽实现方案

实现日历拖拽功能通常需要结合 Vue 的响应式特性和第三方库（如 vuedraggable 或原生 HTML5 Drag and Drop API）。以下是几种常见方法：

使用 vuedraggable 库

安装依赖：

npm install vuedraggable

基础实现代码：

<template>
  <div>
    <draggable 
      v-model="events" 
      @end="onDragEnd"
      :options="{ group: 'calendar' }"
    >
      <div v-for="event in events" :key="event.id" class="calendar-event">
        {{ event.title }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      events: [
        { id: 1, title: 'Meeting', date: '2023-01-01' },
        { id: 2, title: 'Lunch', date: '2023-01-02' }
      ]
    }
  },
  methods: {
    onDragEnd(evt) {
      console.log('New index:', evt.newIndex)
      // 更新事件日期逻辑
    }
  }
}
</script>

使用 HTML5 原生拖拽

基础实现示例：

<template>
  <div 
    v-for="day in days" 
    :key="day.date"
    @drop="onDrop($event, day.date)"
    @dragover.prevent
    @dragenter.prevent
    class="calendar-day"
  >
    <div 
      v-for="event in day.events"
      :key="event.id"
      draggable="true"
      @dragstart="onDragStart($event, event)"
      class="event"
    >
      {{ event.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      days: [
        { date: '2023-01-01', events: [...] },
        // 其他日期数据
      ],
      draggedEvent: null
    }
  },
  methods: {
    onDragStart(evt, event) {
      this.draggedEvent = event
      evt.dataTransfer.setData('text/plain', event.id)
    },
    onDrop(evt, newDate) {
      const eventId = evt.dataTransfer.getData('text')
      // 更新事件到新日期
    }
  }
}
</script>

完整日历组件集成

结合 fullcalendar-vue 和拖拽功能：

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

实现代码：

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        editable: true,
        events: [
          { title: 'Event 1', start: '2023-01-01' }
        ],
        eventDrop: this.handleEventDrop
      }
    }
  },
  methods: {
    handleEventDrop(info) {
      console.log('Event moved to:', info.event.start)
    }
  }
}
</script>