Angular Material Unable to implement multiple Drag & Drop

Question

I have implemented angular material grid list and I'm able to only set drag and drop only on rows or only on cells but not on both.

I want to make the row draggable and also each cell.

That's the project:

https://stackblitz.com/edit/angular-shvsny-daemmb

Answer 1

It's possible with many tricks but it's very tricky to do this with Materials cdkDrag. You can use my library ngx-explorer-dnd which is explicitly made for dragging operations inside a grid. It's inspired from cdkDrag. But at this time it is an alpha. Here is a link to a Stackblitz example.

Here is the link to ngx-explorer-dnd. To use it is very straight forwarded

HTML

<div
  class="outer-container"
  ngxExplorerDndContainer
  ngxDragSelection
  (dragInProgress)="dragInProgress($event)"
  (selectedElementsChange)="selectedElementsChange($event)"
  (targetChange)="targetChange($event)"
  (drop)="drop($event)"
  [selectionAllowed]="!isDragInProgress"
  [badge]="badgeCount"
  [cancelAnimation]="cancelAnimation"
  [selectionDivElement]="myElement"
>
  <app-file
    ngxExplorerDndElement
    [dndElementData]="item"
    [myId]="item"
    *ngFor="let item of files"
  >
  </app-file>

  <app-folder
    ngxExplorerDndTarget
    ngxExplorerDndElement
    [dndElementData]="item"
    [myId]="item"
    *ngFor="let item of directories"
  >
  </app-folder>
</div>

Code

...
dragInProgress(event: boolean) {
    this.isDragInProgress = event;
  }

  selectedElementsChange(event: { count: number; data: FileFolder[] }) {
    for (let _data of this.fileFolderComponents) {
      _data.selected = false;
    }

    for (let _data of event.data) {
      _data.selected = true;
    }
  }

  drop(event: any) {
    // Show the optional event data and the selected components
    // Do whatever you wanna do with it! :-)
    console.log(
      event,
      this.fileFolderComponents.filter((f) => f.selected)
    );

    if (this.cancelAnimation) {
      // false? No target under mouse
      for (let _fileFolder of this.fileFolderComponents.filter(
        (f) => f.selected
      )) {
        if (_fileFolder.id && _fileFolder.id.includes('File')) {
          this.files.splice(
            this.files.findIndex((f) => f === _fileFolder.id),
            1
          );
        }
        if (_fileFolder.id && _fileFolder.id.includes('Folder')) {
          this.directories.splice(
            this.directories.findIndex((f) => f === _fileFolder.id),
            1
          );
        }
      }
    }
  }
...

The lib has a sorting function I say. The result can be looks like this: