ant design table 表格 + js拖拽排序
columnsp配置如下:
{
title: '拖动排序',
width: 90,
render: (d,a) => {
return (
<span
id={`drag&${d.id}`}
style={{cursor: 'move'}}
onMouseDown={()=>{
/**
* 思路
* 1.onMouseDown 元素背景透明, 记录当前dom
* 2.onmousemove tbody 判断鼠标位置和各个元素位置关系, 显示辅助线,
* 3.onmouseup window 处理数据,还原css,清理onmousemove onmouseup事件
*/
const thisNode = document.getElementById(`drag&${d.id}`);
const tdNode = thisNode.parentNode;
const trNode = tdNode.parentNode;
const tbodyNode = trNode.parentNode;
const trsNode = tbodyNode.getElementsByTagName('tr');
//添加样式
trNode.style.opacity = 0.3;
trNode.style.userSelect = 'none';
tbodyNode.style.cursor = 'move';
let thisId = thisNode.id; // 拖动的id
let isTop = true; // 上部还是下部
let lastId = 0; // 停放位置的id
tbodyNode.onmousemove = even=>{
const e = even || window.event;
const dragtr = e.path.find(d=>d.localName==='tr'); //鼠标当前 tr
// const dragtds = dragtr.getElementsByTagName('td'); //鼠标当前 tr内td元素
const dragtd = dragtr.lastChild; //当前拖动框
lastId = dragtd.firstChild.id; //鼠标当前 拖动框id
const height = e.target.offsetHeight; //鼠标当前dom高度
const top = e.offsetY; //鼠标当前dom距离上边框距离
//删除辅助线
for(let i=0; i<trsNode.length; i++){
trsNode[i].classList.remove('drag-line-top','drag-line-bottom')
}
//添加辅助线
if(top<height/2){
isTop = true;
dragtr.classList.add('drag-line-top')
}else{
isTop = false;
dragtr.classList.add('drag-line-bottom')
}
}
window.onmouseup = async e=>{
const thisIdNum = +thisId.split('&')[1];
const lastIdNum = +lastId.split('&')[1];
if(thisId !== lastId){
this.setState({
dataList: JSON.parse(JSON.stringify(ticketList))
});
let dataList = JSON.parse(JSON.stringify(ticketList)) ;//原始数据格式 [{id:1,name:'张三'},{id:2,name:'李四'},{id:5,name:'王五'}]
const item = dataList.find(d=>d.id===thisIdNum);
dataList = dataList.filter(d=>d.id!==thisIdNum);
let lastIdIndex = dataList.findIndex(d=>d.id===lastIdNum);
isTop? dataList.splice(lastIdIndex, 0, item): dataList.splice(lastIdIndex+1, 0, item);
this.setState({dataList})
this.props.Tickets.ticketList = dataList;
console.log(dataList);
//掉接口
// let data = dataList.map((d,i)=>({id: d.id, score: i+1}))
// let resp = await operateService.DulidayAdmin_jobprofile_updatescore(data)
}
//删除样式
trNode.style.opacity = 1;
tbodyNode.style.cursor = 'auto';
for(let i=0; i<trsNode.length; i++){
trsNode[i].classList.remove('drag-line-top','drag-line-bottom')
}
tbodyNode.onmousemove = ()=>{};
window.onmouseup = ()=>{};
}
}}
>拖动</span>
)
}
}
css样式:
.drag-line-top td{
border-top: 1px dashed #1890ff;
}
.drag-line-bottom td{
border-bottom: 1px dashed #1890ff!important;
}