防止 HTML 表格行被拖到另一个表格答案

【问题标题】：Prevent HTML table row from being dragged to another table防止 HTML 表格行被拖到另一个表格
【发布时间】：2021-10-07 15:23:22
【问题描述】：

我在一个页面上有多个表，允许用户拖放行以重新排序每个表。一切正常，除了用户可以将一行从 table1 拖放到 table2 之外，这是我不希望发生的事情。我可以在下面的 JS 代码中添加什么来防止这种情况发生？

<table id="myTable1">
  <thead>
     <tr>
       <th>Head1</th>
       <th>Head2</th>
       <th>Head3</th>
       <th>Head4</th>
     </tr>
  </thead>
  <tbody>
     <tr id="table1_row1" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" ondragover="rowOrderEnd()" ondragend="rowOrderWrite();">
       <td>values 1</td>
       <td>values 2</td>
       <td>values 3</td>
       <td>values 4</td>
     </tr>
     <tr id="table1_row2" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" ondragover="rowOrderEnd()" ondragend="rowOrderWrite();">
       <td>values 5</td>
       <td>values 6</td>
       <td>values 7</td>
       <td>values 8</td>
     </tr>
     <tr id="table1_row3" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" ondragend="rowOrderWrite();">
       <td>values 8</td>
       <td>values 9</td>
       <td>values 10</td>
       <td>values 11</td>
     </tr>
  </tbody>

<table id="myTable2">
  <thead>
     <tr>
       <th>Head1</th>
       <th>Head2</th>
       <th>Head3</th>
       <th>Head4</th>
     </tr>
  </thead>
  <tbody>
     <tr id="table2_row1" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" ondragover="rowOrderEnd()" ondragend="rowOrderWrite();">
       <td>values 1</td>
       <td>values 2</td>
       <td>values 3</td>
       <td>values 4</td>
     </tr>
     <tr id="table2_row2" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" ondragover="rowOrderEnd()" ondragend="rowOrderWrite();">
       <td>values 5</td>
       <td>values 6</td>
       <td>values 7</td>
       <td>values 8</td>
     </tr>
     <tr id="table2_row3" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" ondragend="rowOrderWrite();">
       <td>values 8</td>
       <td>values 9</td>
       <td>values 10</td>
       <td>values 11</td>
     </tr>
  </tbody>

任何我的 JS：

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

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

  function rowOrderWrite(){
    var tableID = e.target.parentNode.id ;
     // do stuff with reorder table rows
     ...
  }

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

尝试更改以下内容 myTable1 -> table1 myTable2 -> table2 正如我在下面的代码 sn-p 中所做的那样

<!DOCTYPE html>
<html>
<title>Web Page Design</title>

<body>
    
<script>
var row;
 
  function rowOrderStart(){  
    row = event.target; 
    //console.log(row)
  }
  function rowOrderEnd(){
    var e = event;
    e.preventDefault(); 
    let children= Array.from(e.target.parentNode.parentNode.children);
    if(e.target.parentNode.parentNode.parentNode.id === row.id.substring(0,row.id.indexOf('_')) ){
    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(){
    var tableID = e.target.parentNode.id ;
     // do stuff with reorder table rows
  }
  </script>
<div>
<table id="table1">
  <thead>
     <tr>
       <th>Head1</th>
       <th>Head2</th>
       <th>Head3</th>
       <th>Head4</th>
     </tr>
  </thead>
  <tbody>
     <tr id="table1_row1" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()">
       <td>values 1</td>
       <td>values 2</td>
       <td>values 3</td>
       <td>values 4</td>
     </tr>
     <tr id="table1_row2" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" >
       <td>values 5</td>
       <td>values 6</td>
       <td>values 7</td>
       <td>values 8</td>
     </tr>
     <tr id="table1_row3" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()"  >
       <td>values 8</td>
       <td>values 9</td>
       <td>values 10</td>
       <td>values 11</td>
     </tr>
  </tbody>
  </table>

<table id="table2">
  <thead>
     <tr>
       <th>Head1</th>
       <th>Head2</th>
       <th>Head3</th>
       <th>Head4</th>
     </tr>
  </thead>
  <tbody>
     <tr id="table2_row1" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" >
       <td>values 1</td>
       <td>values 2</td>
       <td>values 3</td>
       <td>values 4</td>
     </tr>
     <tr id="table2_row2" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" >
       <td>values 5</td>
       <td>values 6</td>
       <td>values 7</td>
       <td>values 8</td>
     </tr>
     <tr id="table2_row3" draggable="true" ondragstart="rowOrderStart()" ondragover="rowOrderEnd()" >
       <td>values 8</td>
       <td>values 9</td>
       <td>values 10</td>
       <td>values 11</td>
     </tr>
  </tbody>
  </table>
</div>
</body>

</html>

【讨论】：

那位先生，工作完美。谢谢。