element 实现表格数据拖拽 数据拖拽其他区域实现 拖拽到日期 并在下面div盒子数据显示出来（直接复制）就能使用

<template>
  <!-- -->
  <div id="app">
    <el-table :data="tableData" style="width: 100%" row-key="id" ref="table">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="Name" width="180"></el-table-column>
      <el-table-column prop="age" label="Age" width="100"></el-table-column>
      <el-table-column label="Actions" width="120">
        <template slot-scope="scope">
          <div
            class="draggable-row"
            :data-id="scope.row.id"
            draggable="true"
            @dragstart="handleDragStart(scope.row)"
          >
            Drag me
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="calendar">
      <div
        v-for="(date, index) in calendarDates"
        :key="index"
        class="calendar-date"
        :class="{ 'drag-over': isDragOverDate === date }"
        @dragover.prevent="handleDragOver(date)"
        @drop="handleDrop(date)"
      >
        {{ formatDate(date) }}
      </div>
    </div>

    <div v-if="droppedData">
      <p>{{ droppedDate }}</p>
      <pre>{{ droppedData }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      tableData: [
        { id: 1, name: "Tom", age: 25 },
        { id: 2, name: "Tom", age: 35 },
        { id: 3, name: "Tom", age: 45 },
        { id: 41, name: "Tom", age: 55 },
        // ... more rows
      ],
      calendarDates: this.generateCalendarDates(
        new Date(2023, 0, 1),
        new Date(2023, 0, 30)
      ), // January 1st to 30th
      draggedRow: null,
      isDragOverDate: null,
      droppedData: null,
      droppedDate: null,
    };
  },
  methods: {
    // 表格拖拽的方法     拖拽开始时的事件处理函数
    handleDragStart(row) {
      // 设置拖动的行为数据
      console.log(row,'222222222');
      this.draggedRow = row;
    },
    // 日历拖拽的方法
    handleDragOver(date) {
      // 将拖动的日期赋值给 isDragOverDate
      this.isDragOverDate = date;
    },
    //  放置到当前日历的方法   事件处理函数
    handleDrop(date) {
      console.log(date,'11111111111111');
      // 将拖拽的数据赋值给 droppedData
      this.droppedData = this.draggedRow;

      // 将传入的日期格式化后赋值给 droppedDate
      this.droppedDate = this.formatDate(date);

      // 将 draggedRow 设置为 null，表示当前没有拖拽的行
      this.draggedRow = null;

      // 将 isDragOverDate 设置为 null，表示当前没有拖拽经过的日期
      this.isDragOverDate = null;
    },
    // 生成日历日期的方法
    generateCalendarDates(startDate, endDate) {
      // 初始化一个空数组用于存储日期
      const dates = [];
      // 将起始日期转换为Date对象
      let currentDate = new Date(startDate);
      // 使用while循环遍历从起始日期到结束日期的每一天
      while (currentDate <= endDate) {
        // 将当前日期添加到日期数组中
        dates.push(new Date(currentDate));
        // 将当前日期增加一天
        currentDate.setDate(currentDate.getDate() + 1);
      }
      // 返回包含所有日期的数组
      return dates;
    },
    // 格式化日期的方法
    formatDate(date) {
     
      // 获取月份，并转换为字符串，如果月份为个位数，则在前面补零
      const month = String(date.getMonth() + 1).padStart(2, "0");
      // 获取日期，并转换为字符串，如果日期为个位数，则在前面补零
      const day = String(date.getDate()).padStart(2, "0");
      // 返回格式化后的日期字符串
      return `${date.getFullYear()}-${month}-${day}`;
    },
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}

.draggable-row {
  display: inline-block;
  padding: 8px;
  margin: 4px;
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  cursor: move;
}

.calendar {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: center;
}

.calendar-date {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  border-radius: 5px;
}

.calendar-date.drag-over {
  border-color: #007bff;
  background-color: #e0f7fa;
}
</style>

效果图

项目引入的框架自行解决