vue页面的table标签进行单元格拖拽

先上代码

<td :dataIndex="index" draggable="true"  @dragend="drop($event)" @dragover="allowDrop($event)" :style="subInfo.flg ? 'border: solid 1px;width: 150px;text-align: center;height: 75px;background: #f43838;' : 'border: solid 1px;width: 150px;text-align: center;height: 75px;'"
                   v-if="subInfo.view && week.label === subInfo.week" v-for="(subInfo,index) in result">
                <span :dataIndex="index"  v-if="subInfo.curriculumList !== undefined " v-text="subInfo.curriculumList.subjectName + '/' + subInfo.curriculumList.teacherName "></span>
</td>

//拖拽移动中，获取移动到那个位置
      allowDrop(event) {

//获取整个拖拽的td单元格数据  dataindex是我自己加上的属性，代表数据在整个list的位置

//下面方法获取单元格移动到了那个位置
        this.endIndex = event.target.getAttribute("dataindex");

      },
//拖拽结束，进行数据处理使用

      drop(event) {

//下面方法获取拖拽数据的list位置
this.beginIndex = event.target.getAttribute("dataindex");


}

 

其中主要使用  

dataIndex="index" //因为里面还有span标签，所以给span也要加上，不然获取数据时候可能获取不到

draggable="true"   //开启拖拽

@dragend="drop($event)"  //拖拽结束

@dragover="allowDrop($event)" // 拖拽移动

@dragStart="drag($event)" //拖拽开始；我没用到

 

小弟vue没用多久，如有问题，还请大家指出，谢谢