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>