help(Drang and Drop): [Drag and Drop Angular Material is not working good with Dialog Material]

[astrO1]

What are you trying to do?

I'm trying to Drag and Drop my image list that sometimes works and sometimes doesn't.

What troubleshooting steps have you tried?

I have a Dialog Material that is open when the user clicks and inside I have a Mat-Tab that when the user clicks the change for the component that I have a list of images that has a Drag and Drop for order propose and sometimes work and some doesn't and I don't know why.

Reproduction

It is too much job to make a reproduction of this because is a large application but I can put my codes here:

openProductDialog(rowChoosed) {
    const objTemp = { name: 'Editar Produto', objData: rowChoosed };
    this.dialog.open(DialogFormUpdateProductComponent, {
      panelClass: 'custom-dialog-product-mp',
      width: '920px',
      height: 'auto',
      maxHeight: '800px',
      data: objTemp,
    });
    this.updateState();
  }

And when the object is clicked a modal like this is open:

When the modal is open, the modal has an Image tab like in the picture and when this is clicked it shows my upload image that is like this:

In the tab, I put a component that starts that feature

<mat-tab label="Imagens">
  <app-upload-img></app-upload-img>
</mat-tab>

The problem is sometimes I open my modal and simply can't drag and drop, sometimes I can sometimes I don't.

So I don't know what looking to resolve my problem. Strange behavior I detected is that I have a lightbox when I click the image, so I know when I cannot drag in drop the images when my lightbox stays like this:

The image simple jump to the top of the page and when this happens I can't drag in drop the images, I think is some CSS problem.

I see this thread #15880

and when I put this in CSS

html.cdk-global-scrollblock {
    position: initial !important;
}

html.cdk-global-scrollblock body {
    position: fixed;
}

it worked but break my website

Environment

• Angular: 9.1.2
• CDK/Material: 9.2.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[andrewseguin]

Sorry for the delay in providing help with this - we are currently limited on resources for troubleshooting issues. You will probably have better luck getting help if you post on StackOverflow.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}