JavaScript drag multiple rows once grouped in a table

Viewed 36

I lifted some code that worked for dragging a row to other places in a table.

But I need to be able to drag multiple rows, if possible. So far I've managed to group together the rows that need to move as a whole based on their hidden table value (which shows their nesting level - it's basically a parent-child tree pattern, and I want all sub-groups belonging to their parent to move with their parent).

How can I extend the event to include all the rows to move around? Is this possible?

Or is there a much easier way to group and move more than one row at a time?

The console logs are just there as proof to myself that the grouping is working as expected. I have a reasonable grasp of programming concepts but my JS is basically beginner level!

 var row;
 var myrows;

    function dragstart(){  
    
      myrows = [];

      let allrows = Array.from(event.target.parentNode.children);
      row = event.target;

      let index = -1;
        for (var i = 0; i < allrows.length; i++){
            if (allrows[i] == row){
                index = i;
                break;
            }
        }
      
      let init = event.target.children[1].outerText;
      
      let flag = true;
            
      myrows.push(row);

        for (let i = index + 1; i < allrows.length; i++) {

            let r1 = allrows[i];

            console.log("Compare " + r1.children[1].outerText + " against " + init);

            if (r1.children[1].outerText <= init){
                break;
            }
            myrows.push(r1);
        }

      console.log(myrows);
    }

    function dragover(){

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

    function dragend(){
        var e = event;
    }
<table>
<tbody>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>home</td>
    <td hidden="hidden">0</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>home-1</td>
    <td hidden="hidden">1</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>home-1-2</td>
    <td hidden="hidden">2</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>home-2</td>
    <td hidden="hidden">1</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>home-2-1</td>
    <td hidden="hidden">2</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>abc</td>
    <td hidden="hidden">0</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>xyz</td>
    <td hidden="hidden">0</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>xyz-1</td>
    <td hidden="hidden">1</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>xyz-1-1</td>
    <td hidden="hidden">2</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>xyz-1-2</td>
    <td hidden="hidden">2</td>
  </tr>
  <tr draggable="true" ondragstart="dragstart()" ondragover="dragover()" ondragend="dragend()">
    <td>123</td>
    <td hidden="hidden">0</td>
  </tr>
</tbody>
</table>

0 Answers
Related