Drag & Drop row with parents and childs

Question

I have a table when I integrate a tree table with simple-tree-table . With that I can work with parents and child row, collapse and expand.

Now I'm trying to drag & drop rows with jQuery sortable and I can drag rows well but I need to drag a parents along with their children too and now what happens is I can only drag the parent. I followed this tutorial .

To sort the rows I have this code, if tr is a child the drop is not possible otherwise I can sort the row.

What I need is to detect if the parent has children and if it does then I have to drop parent and child. How can I do that?

<table id="gama">
  <tr data-node-id="1">
    <td>1</td>
    <td>text of 1</td>
  </tr>
  <tr data-node-id="1.1" data-node-pid="1">
    <td>1.1</td>
    <td>text of 1.1</td>
  </tr>
  <tr data-node-id="2">
    <td>2</td>
    <td>text of 2</td>
  </tr>
  <tr data-node-id="2.1" data-node-pid="2">
    <td>2.1</td>
    <td>text of 2.1</td>
  </tr>
</table>

$("#gama tbody tr.child").sortable({
  helper: fixHelperModified,
  stop: updateIndex,
  cursor: 'no-drop',
}).disableSelection();

$("tbody").sortable({
  distance: 5,
  delay: 100,
  opacity: 0.6,
  cursor: 'move'
});

Answer 1

You can use jQuery to find elements with the attribute data-node-pid that start with the parent element's data-node-id .

For example, to find the children of the element with data-node-id="1" , you could do:

$("tr[data-node-pid^='1']")

which would return all the nodes with data-node-pid starting with '1' (eg '1.1', '1.2.1', etc). If it's empty, the parent has no children.