element中使用el-table可任意拖拽单元格到指定位置

最近在写一个排课系统，有些前台交互，还是挺有意思的

el-table中有拖拽整行的方法，但是拖拽单元格怎么实现呢

我这边是这样想的，拖拽获得行索引，通过放下时的位置，可以得到列索引，就可以确定当前移入的位置，进行对列表数据的修改

由于项目需要，我的表头是自己生成的

格式大致如下：

weekArr=[
                  {
                       date: "2022-10-24",
                       weeks: "星期一"
                  },
                 {
                       date: "2022-10-25",
                       weeks: "星期二"
                  },
                 {
                       date: "2022-10-26",
                       weeks: "星期三"
                  },
                  {
                       date: "2022-10-27",
                       weeks: "星期四"
                  },
                 {
                       date: "2022-10-28",
                       weeks: "星期五"
                  },
                 {
                       date: "2022-10-29",
                       weeks: "星期六"
                  },
                 {
                       date: "2022-10-230,
                       weeks: "星期天"
                  },
          ]

我的数据类型的结构大致如下

assistlist: {
        lists: [{
                        courseName:'xx课',
                        area_name:'总校',
                        courses:[{
                                date:'2022-10-24',
                                morning:'上',
                                morningTeacher:'张三',
                                afternoon:'下',
                                afternoonTeacher:'李四',
                                night:'晚',
                                all:'全',
                                class:'课程',
                                nightTeacher:'李思思',
                                remarks:'备注：该课程与第二期同教师该课程与第二期同教师'
                            },{
                                date:'2022-10-29',
                                morning:'上',
                                morningTeacher:'张三',
                                afternoon:'下',
                                afternoonTeacher:'李四',
                                night:'晚',
                                nightTeacher:'李思思',
                                remarks:'备注：该课程与第二期同教师该课程与第二期同教师'
                        }]
                    }],
           },

　所以我的表头除了第一列，其余都是动态的，结构如下

<el-table   v-loading="loading" :data="assistlist.lists" @cell-click="goclick" @cell-dblclick='handleMouseEnter' row-style="{height: '0'}" :cell-style="myclass"  :cell-class-name="cellClassName"   >
   <el-table-column label="课程名称/日期" align='center'>　　　　　　　　　　　　　　
       <template slot-scope="scope">
           <p>{{scope.row.courseName}}</p>
           <p>{{scope.row.area_name}}</p>
       </template>
   </el-table-column>
       <el-table-column  :key="ii" :prop="item.value" :label="item.date+'/'+item.weeks" align='center' v-for='(item,ii) in weekARR' >
       <template  slot-scope="scope">
                     <div class="courses">
                            <div v-for='(items,index) in scope.row.courses' :key="index" class="courseDetail" draggable @drop="drop($event, items,'courses',scope.row.id,scope.$index,item)" @dragover="allowDrop">
                                 <div v-if="items.date==item.date" draggable @dragstart="drag(items,scope.row.id,scope.$index,item.date)" @dragEnd="dragEnd(items)">
                                        <p draggable v-show="items.morning">
                                               <span class="tags">{{items.morning}} </span>
                                               <span>{{items.class}}-{{items.morningTeacher?items.morningTeacher:'暂未安排老师'}}</span>
                                        </p>
                                        <p v-show="items.afternoon">
                                               <span class="tags">{{items.afternoon}}</span>
                                               <span>{{items.class}}-{{items.morningTeacher?items.morningTeacher:'暂未安排老师'}}</span>
                                        </p>
                                        <p v-show="items.night">
                                               <span class="tags">{{items.night}}</span>
                                               <span>{{items.class}}-{{items.morningTeacher?items.morningTeacher:'暂未安排老师'}}</span>
                                        </p>
                                        <p v-show="items.all" >
                                               <span class="tags">{{items.all}}</span>
                                                <span>{{items.class}}-{{items.morningTeacher?items.morningTeacher:'暂未安排老师'}}</span>
                                         </p>
                                          <p class="remarks">{{items.remarks?items.remarks:''}}</p>
                                  </div>
                              </div>
                             <div draggable @drop="drop($event, i,'empty',scope.row.id,scope.$index,item.date)" @dragover="allowDrop" class="aaa"  v-for='(it,i) in 7' :key='i' v-show='i==ii'  　　　　　　　　　　　　　　　　　　　　　　　　style='width:100%;height:100%; position: absolute;' >                                        <div class="actions" v-show="checkArr.length!=0&&scope.$index==checkArr[checkArr.length-1].row&&item.date==weekARR[checkArr[checkArr.length-1].column-1].date">
                                           <el-button type="text">站位</el-button>
                                           <el-button type="text">排课</el-button>
                                           <el-button type="text">备注</el-button>
                                       </div>
                              </div>
                      </div>
                </template>
   </el-table-column>
       <template slot="empty">
           <img class="emptyshare" src="@/assets/img/blankDrawing.png" alt="">
           <p class="textshare">没有找到相关信息~</p>
       </template>
   </el-table> 

　　要想拖拽，首先是要将一个块元素拖拽到另一个块元素中，要想使元素能够被拖拽，需要加上draggable 属性

再说关于拖拽的方法，很久没用了，还是查了一些资料得以实现，

只说其中的dragstart，dragEnd是作用于被拖拽元素，drop作用于目标元素

先来说drag方法

drag(items,id,Index) {
              this.startWeek=items//startWeek是我用来存储被拖拽元素内容的一个变量
              this.startIndex=Index//用来记录被拖拽元素的行索引
          },

　　再来说拖拽结束的逻辑

drop(e,items,type,id,index,date) {
             console.log(items);//为空是横坐标的位置，有课程时是课程信息
             console.log(index);//这里的纵坐标是指第几列
             console.log(this.startIndex);//被拖拽课程的横坐标，及第几行的索引
             if(type=='empty'){
               // 移到空白位置
               if(this.startIndex==index){
                     // 同一行转移
                   this.assistlist.lists[index].courses.forEach(val=>{
                       if(val.date==this.startWeek.date){
                           val.date=this.weekARR[items].date
                       }
                   })
               }else{
                   // 不同行转移
                   this.assistlist.lists[this.startIndex].courses.forEach((val,ii)=>{
                       if(val.date==this.startWeek.date){//清空原位置
                           this.assistlist.lists[this.startIndex].courses.splice(ii,1)
                       }
                   })
                   let obj=this.startWeek
                   obj.date=this.weekARR[items].date
                   this.assistlist.lists[index].courses.push(obj)//追加新的课程
               }
 
             }else{
               // 移到有课的位置
             }
           },