拖拽表格行完成后调用JS函数并传递表格ID的实现问题

第一步：修改HTML的行事件绑定 #

你当前把重排序逻辑绑定在ondragover事件上存在逻辑问题，dragover是拖拽元素经过目标时会持续触发的事件，不是用户松开鼠标完成放置的时机，调整所有行的事件绑定规则如下：

<table id="myTable">
  <thead>
     <tr>
       <th>Head1</th>
       <th>Head2</th>
       <th>Head3</th>
       <th>Head4</th>
     </tr>
  </thead>
  <tbody>
     <tr id="row1" draggable="true" ondragstart="rowOrderStart()" ondragover="event.preventDefault()" ondrop="rowOrderEnd()">
       <td>values 1</td>
       <td>values 2</td>
       <td>values 3</td>
       <td>values 4</td>
     </tr>
     <tr id="row2" draggable="true" ondragstart="rowOrderStart()" ondragover="event.preventDefault()" ondrop="rowOrderEnd()">
       <td>values 5</td>
       <td>values 6</td>
       <td>values 7</td>
       <td>values 8</td>
     </tr>
     <tr id="row3" draggable="true" ondragstart="rowOrderStart()" ondragover="event.preventDefault()" ondrop="rowOrderEnd()">
       <td>values 8</td>
       <td>values 9</td>
       <td>values 10</td>
       <td>values 11</td>
     </tr>
  </tbody>
</table>

说明：ondragover="event.preventDefault()"是浏览器允许元素被放置的必要前提，ondrop事件只会在用户松开鼠标完成放置操作时触发一次

第二步：调整JS逻辑调用收尾函数 #

修改rowOrderEnd函数，修正表格ID的获取逻辑，在行重排序完成后直接调用rowOrderWrite即可：

var row;

function rowOrderStart(){  
  row = event.target; 
}
function rowOrderEnd(){
  var e = event;
  e.preventDefault(); 
  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);

  // 修正：获取当前行所属表格的ID，不是行自身的ID
  var tableID = e.target.closest('table').id;
  // 放置完成后调用自定义收尾函数
  rowOrderWrite(tableID);
}

function rowOrderWrite(tableID){
   // 你的自定义收尾逻辑
   // ...
}

内容的提问来源于stack exchange，提问作者rolinger