vue可拖拽日程待办

你可以使用 Vue.js 与第三方库来实现可拖拽的日程待办功能。以下是一个使用 Vue.js 和 FullCalendar 插件的简单示例：

1. 安装 FullCalendar 插件：

npm install fullcalendar@3.10.0

2. 在 Vue 组件中引入 FullCalendar 和其 CSS 样式：

import 'fullcalendar/dist/fullcalendar.css'
import 'fullcalendar/dist/fullcalendar.js'

3. 在 Vue 组件中定义日历的配置和事件：

export default {
  data () {
    return {
      calendarOptions: {
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listWeek'
        },
        editable: true,
        droppable: true,
        eventLimit: true,
        events: [
          {
            title: 'My Event 1',
            start: '2018-07-25T10:30:00',
            end: '2018-07-25T12:30:00',
            backgroundColor: '#007bff',
            borderColor: '#007bff'
          },
          {
            title: 'My Event 2',
            start: '2018-07-26T12:00:00',
            backgroundColor: '#28a745',
            borderColor: '#28a745'
          }
        ]
      }
    }
  },
  mounted () {
    // 初始化日历
    $('#calendar').fullCalendar(this.calendarOptions)

    // 监听拖拽事件
    $('#external-events .fc-event').each(function () {
      $(this).data('event', {
        title: $.trim($(this).text()),
        stick: true
      })
      $(this).draggable({
        zIndex: 999,
        revert: true,      // 拖拽结束后返回原位置
        revertDuration: 0  // 拖拽结束后返回原位置的持续时间
      })
    })
  }
}

4. 在 Vue 模板中定义日历和可拖拽的事件：

<template>
  <div>
    <div id="external-events">
      <p>Draggable Events</p>
      <div class="fc-event">My Event 1</div>
      <div class="fc-event">My Event 2</div>
    </div>
    <div id="calendar"></div>
  </div>
</template>

这样，你就可以实现一个简单的可拖拽的日程待办功能了。当你拖拽一个事件到日历中时，它会自动创建一个新的日程事件。你可以通过 FullCalendar 插件的其他配置项来自定义日历的外观和行为。