Angular material drag-drop design not working properly-CodePudding

Here is video for more explaination In this i am not able to drag and drop with proper css its breaking down when i drag it. It should drag like this link : https://material.angular.io/cdk/drag-drop/overview. i am using reordering list drag drop of anugular material in my project

App.component.html

<div >
   <div cdkDropList  (cdkDropListDropped)="dropdropwe($event)">
      <div  *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
   </div>
</div>

App.component.ts

 movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi',
    'Episode IX – The Rise of Skywalker',
  ];

  dropwe(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }

App.component.scss

.drager-test {
    .example-list {
        width        : 500px;
        max-width    : 100%;
        border       : solid 1px #ccc;
        min-height   : 60px;
        display      : block;
        background   : white;
        border-radius: 4px;
        overflow     : hidden;
    }

    .example-box {
        padding        : 20px 10px;
        border-bottom  : solid 1px #ccc;
        color          : rgba(0, 0, 0, 0.87);
        display        : flex;
        flex-direction : row;
        align-items    : center;
        justify-content: space-between;
        box-sizing     : border-box;
        cursor         : move;
        background     : white;
        font-size      : 14px;
    }

    .cdk-drag-preview {
        box-sizing   : border-box;
        border-radius: 4px;
        box-shadow   : 0 5px 5px -3px rgba(0, 0, 0, 0.2),
            0 8px 10px 1px rgba(0, 0, 0, 0.14),
            0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .cdk-drag-placeholder {
        opacity: 0;
    }
    

    .cdk-drag-animating {
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }

    .example-box:last-child {
        border: none;
    }

    .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
}

CodePudding user response：

The short answer: use in your .css

.cdk-drag-preview {
      background     : white;
      padding        : 20px 10px;
      box-sizing   : border-box;
      color          : rgba(0, 0, 0, 0.87);
      display        : flex;
      align-items    : center;
      font-size      : 14px;
      border-radius: 4px;
      box-shadow   : 0 5px 5px -3px rgba(0, 0, 0, 0.2),
          0 8px 10px 1px rgba(0, 0, 0, 0.14),
          0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }

You can use also .example-box.cdk-drag-preview

not .drager-test .cdk-drag-preview

the reason: @angular/cdk/drag-drop create a new div with the class: example-box cdk-drag-preview (the class of our cdkDrag and always cdk-drag-preview).

But this div is "outside" our component so not exist .drager-test in any way (this is the reason that, as you use .drager-test .example-box to format the "item" you need repeat the properties "background, display, flex-direction,..." in the .ckd-drag-preview

CodePudding user response：

From docs

When a cdkDrag element is picked up, it will create a preview element visible while dragging. By default, this will be a clone of the original element positioned next to the user's cursor.

This preview element is inserted into the <body> of the page. The preview element will have all the classes that we provide on the cdkDrag element and one more additional class cdk-drag-preview. So in your case the element inserted into body will have example-box cdk-drag-preview classes.

The preview element wouldn't be available within your parent container div having drager-test class, and since you have defined your classes as below, they are not getting applied to the preview element.

.drager-test {
  /* Other classes */

  .example-box {
    padding: 20px 10px;
    border-bottom: solid 1px #ccc;
    /* Other properties */
  }
  
  .cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
      0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
}

Solution 1:

Specific the styles for CSS classes example-box and cdk-drag-preview outside of .drager-test, so that they get applied to the preview element.

Solution 2:

Define cdkDragPreviewContainer input with value of parent on your cdkDrag element as:

<div  *ngFor="let movie of movies"
    cdkDrag cdkDragPreviewContainer="parent">{{movie}}</div>

Drag preview insertion point (Link contains a table explaining possible values of cdkDragPreviewContainer along with their pros and cons)

By default, the preview of a cdkDrag will be inserted into the <body> of the page in order to avoid issues with z-index and overflow: hidden. This may not be desireable in some cases, because the preview won't retain its inherited styles. You can control where the preview is inserted using the cdkDragPreviewContainer input on cdkDrag.