Prevent HTML table row from being dragged to another table-CodePudding

I have multiple tables on a page that I allow the users to drag and drop the rows to reorder each table. It all works, except for the fact that the user can drag and drop a row from table1 to table2 which is something I don't want happening. What can I add to JS code below to prevent that from happening?

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

Any my 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
     ...
  }

CodePudding user response：

try changing the following myTable1 -> table1 myTable2 -> table2 as i have done in below code snippet

<!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>