ant design table 表格 + js拖拽排序

最新推荐文章于 2025-06-10 09:00:01 发布

原创最新推荐文章于 2025-06-10 09:00:01 发布 · 6.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#蚂蚁拖拽排序表格 #ant design 表格 + js拖拽排序

javascript 同时被 2 个专栏收录

34 篇文章

订阅专栏

工具

6 篇文章

订阅专栏

本文详细介绍了如何使用 AntDesign 的 Table 组件结合 JavaScript 实现拖拽排序功能，包括 onMouseDown、onMouseMove 和 onMouseUp 事件的处理，以及通过 CSS 添加辅助线来指示拖放位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}