Drag/drop expansion rows

[stable badge]

First step: yeou need to model your dataSource properly first.

{
    position: 9,
    Name: 'Fluorine',
    weight: 18.9984,
    symbol: 'F',
    description: `Fluorine is symbol F`,
    expandedRows: [...] // <--
  }

Then onDrop transfer the row between items.

[lusty cedar]

Not sure I follow what you mean here as far as what I'm trying to do. I want to drag one of the expanded rows to another set of expanded rows. Similar to this example
https://codepen.io/JoeHoeller/pen/bNVYwJz
For example, when you drag H child 1 down to Helium section and if you drag He child 1 up to Hydrogen section.

[stable badge]

Your Items don't have the Array to store rows

You can't paste your HTML 4 times to simulate 4 rows

There is no way to fix your stackblitz

From first glance, the codepen is using DOM to add <tr> or remove <tr> . Not angular.

[lusty cedar]

I'm not trying to use arrays. This is hardcoded demo data. I just want to be able to drag any of those rows that expand to another set of rows that expand.

[stable badge]

cdkDragDrop works with Data

[lusty cedar]

Not sure what you mean it's working with the codepen example I linked to. There's data there

I'm trying to get that logic from codepen to work in my stackblitz.

[stable badge]

The codepen works with DOM.

  if (before && before !== dragged) {
     list.insertBefore(dragged, before);
   } else {
      list.appendChild(dragged);
   }

CdkDrag doesn't

[lusty cedar]

The codepen is just an example of what I'm trying to do but it's not exactly set up the same way as my stackblitz. I know there has to be a way to do with my stackblitz. is there anyone else that could help me with this please?