a-table 之间的拖拽功能的实现

57 阅读1分钟

image.png

目标位置

image.png

源位置

image.png

功能方法

function drop(e) {
  console.log(2222,e)
  e.preventDefault();
}
function dragOver(e) {
  e.preventDefault(); // 一定要执行,否则ondrop事件不会被触发
}
function dragleave(e) {
  dragerData.value = null
  console.log("离开放置区域");
}
function dragenter(record,e) {
  if(unref(dragerData) != null) {
    record.excelName = dragerData.value.excelName
    console.log("进入放置区域");
  }

}
function onEnd(e) {
  console.log(e,4444)
}
function onStart(record,e) {
  dragerData.value = record || null

}
function changeDragover() {
  let oldData = JSON.parse(JSON.stringify(viewData.dataSource));
  if( viewData.endRecord && Object.keys(viewData.endRecord).length > 0 ) {
    let transferData = oldData.filter((item) => {
      return item.id != viewData.startRecord.id
    })
    for (let i = 0; i < transferData.length; i++) {
      if (transferData[i].id == viewData.endRecord.id) {
        transferData.splice(i + 1, 0, viewData.startRecord)
        break;
      }
    }
    viewData.dataSource = transferData;
    viewData.startRecord = {};
    viewData.endRecord = {};
  }
}