How can I remove the preview display from drop section using Angular Drag and Drop?

user_10256360 0
Viewed 2134

I am using the Drag and Drop functionality of Angular in order to drag a card from a card list to a empty div.

Pizza list

I have been checking the API documentation of Angular's drag and drop and I have found possible configuration on the preview of the drag but not the drop (the biggest image in the example)

Origin:

<mat-accordion
      cdkDropList
      [cdkDropListConnectedTo]="['viewer0', 'viewer1', 'viewer2', 'viewer3']"
      (cdkDropListDropped)="drop($event)"
    >
      <div *ngFor="let serie of seriesList">
        <div
          cdkDrag
          [cdkDragData]="serie"
        >
..........

Display div:

    <div cdkDropListGroup>
      <div
        cdkDropList
        cdkDropListConnectedTo="series-list"
        (cdkDropListDropped)="drop($event)"
      >
..........

Expected: The preview of the image must be NOT displayed in the right section at the moment that we are dragging the card.

display angular-material angular drag-and-drop
2 Answers

Solved!

I just found the native class .drop-preview on the documentation and I just made some changes in the scss file:

.drop-preview {
  background: $accent;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  p {
    padding-top: 15px;
    font-size: 17px;
  }
}

Now it looks like this:

Nice pizza

user_102563600

my friend, the best way to do this is with the CSS Classes, where you can change what you want for example the preview.

.cdk-drag-preview {
    background: white;
    width: 100%;
    height: 100%;
    opacity: 0.5;
 }

All this are in that link: link

user_73904050
Related