如何阻止HTML表格行被拖拽到其他表格仅允许同表内重排序

DevOps 小满

2026-10-1

解决思路

核心是在拖拽开始时记录当前拖拽行所属的表格ID，在拖拽放置逻辑执行前校验目标区域的表格ID是否和源表格ID一致，不一致则直接终止排序逻辑。

具体修改步骤

新增全局变量存储源表格ID
在rowOrderStart方法中获取并存储拖拽起始行所属的父表格ID
在rowOrderEnd方法开头添加校验逻辑，若目标行所属表格与源表格不一致直接返回，不执行后续排序操作
修复原代码中rowOrderWrite方法未获取event对象的问题

修改后完整JS代码

var row;
// 新增变量存储拖拽起始行所属的表格ID
var sourceTableId;

function rowOrderStart(){  
  row = event.target; 
  // 获取当前拖拽行所在的table的ID并存储
  sourceTableId = row.closest('table').id;
}
function rowOrderEnd(){
  var e = event;
  e.preventDefault(); 
  // 获取当前目标行所在的table的ID
  const targetTableId = e.target.closest('table').id;
  // 若两个表格ID不一致，直接终止逻辑，不允许跨表格拖拽
  if(targetTableId !== sourceTableId) return;

  let children= Array.from(e.target.parentNode.parentNode.children);
  
  if(children.indexOf(e.target.parentNode)>children.indexOf(row))
    e.target.parentNode.after(row);
  else
    e.target.parentNode.before(row);

  var tableID = e.target.parentNode.id ;
}

function rowOrderWrite(){
  // 修复原代码未定义e的问题
  var e = event;
  var tableID = e.target.parentNode.id ;
   // do stuff with reorder table rows
   // ...
}