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 class="drager-test">
<div cdkDropList class="example-list" (cdkDropListDropped)="dropdropwe($event)">
<div class="example-box" *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);
}
}
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