【vue3表格单元格拖拽】

vue3表格单元格拖拽

<script setup lang="ts">
import { defineProps } from 'vue'
import { ref } from 'vue';
import { useAutoApi } from '/@/api/overview/Automaticscheduling';
import { ElMessage } from 'element-plus';

const props = defineProps({
  schedulingItems: {
    type: Array
  }
})
const generateCalendar = (year: number, month: number) => {
  let newDay = []
  const daysInMonth = new Date(year, month, 0).getDate();
  for (let day = 1; day <= daysInMonth; day++) {
    newDay.push(day)
  }
  return newDay
};
const ViewLoading = ref(false)
const currentYear = ref(new Date().getFullYear());
const calendarData = generateCalendar(currentYear.value, 4);
const tableData = ref([
  { rowLabel: '节拍1', 1: { code: 'sdsss11', name: 'Ⅰ型', packageNum: '1/15' } },
  { rowLabel: '节拍2', 1: { code: 'sdsss71', name: 'Ⅰ型', packageNum: '7/15' } },
  { rowLabel: '节拍3', 1: { code: 'sdsss21', name: 'Ⅰ型', packageNum: '9/15' } },
  { rowLabel: '节拍4', 1: { code: 'sdsss31', name: 'Ⅰ型', packageNum: '4/15' } },
  { rowLabel: '节拍5', 1: { code: 'sdsss51', name: 'Ⅰ型', packageNum: '8/15' } },
  { rowLabel: '节拍6', 1: { code: 'sdsss41', name: 'Ⅰ型', packageNum: '5/15' } },
  { rowLabel: '节拍7', 1: { code: 'sdsss61', name: 'Ⅰ型', packageNum: '2/15' } },
])

const handleDragStart = (rowIndex: number, cellIndex: number) => {
  console.log(rowIndex, cellIndex);
  // 记录拖拽的起始位置
  event.dataTransfer?.setData('text/plain', JSON.stringify({ rowIndex, cellIndex }));
};

const handleDragOver = (event: DragEvent) => {
  event.preventDefault();
};

const handleDrop = (toRowIndex: number, toCellIndex: number) => {
  const data = JSON.parse(event.dataTransfer?.getData('text/plain') || '');
  const { rowIndex, cellIndex } = data;
  // 移动单元格数据
  const draggedCell = tableData.value[rowIndex][cellIndex];
  tableData.value[rowIndex][cellIndex] = tableData.value[toRowIndex][toCellIndex]
  tableData.value[toRowIndex][toCellIndex] = draggedCell
};

const handleDragEnd = () => {
  // 清理拖拽样式或状态
};

</script>

<template>
  <div class="container">
    <div class="calendar">
      <table>
        <thead>
          <tr class="backg">
            <th>节拍数</th>
            <th v-for="day in calendarData" :key="day">{{ ('0' + day).slice(-2) }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.rowLabel }}</td>
            <td v-for="(cell, cellIndex) in calendarData" :key="cell" :draggable="true"
              @dragstart="handleDragStart(index, cell)" @dragover="handleDragOver" @drop="handleDrop(index, cell)"
              @dragend="handleDragEnd">
              <div class="cell-content flex-col">
                <span>
                  {{ item[cell]?.code }} {{ item[cell]?.name }}
                </span>
                <span>
                  {{ item[cell]?.packageNum }}
                </span>


              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.container {
  margin-top: 10px;
}

.ghost {
  border: solid 1px rgb(19, 41, 239) !important;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #55ABDC;
}

.backg {
  background-color: #5A6FC0;
  color: #fff;

  th {
    min-width: 150px !important;
    padding: 10px 0px;
    border: 1px solid #55ABDC;
  }
}

tbody {
  tr td {
    text-align: center;
    padding: 10px 0px;
    border: 1px solid #55ABDC;
  }
}
</style>