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

2024年3月27日 71次阅读 来源: 丶会武术的流氓丶

先上代码

<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没用多久，如有问题，还请大家指出，谢谢

    原文作者：丶会武术的流氓丶
    原文地址: https://blog.csdn.net/qq_39900178/article/details/89949981
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞