I have created a small list of characters that are draggable using Cdk Drag Drop. Everything is working well so far! Now, I want to customize the style of the draggable items. I came across .cdk-drag-preview class for styling, which also includes box-shadow. I attempted to modify the mat-checkboxes within .cdk-drag-preview but it didn't work as expected. Do you have any suggestions on how to achieve this?
Check out my Stackblitz demo: https://stackblitz.com/edit/angular-cdk-drag-drop-vsge6t?file=app%2Fcdk-drag-drop-connected-sorting-example.css
Here is my code:
// HTML
<form [formGroup]="reportCompositionForm">
<div class="drag-container">
<div cdkDropListGroup>
<div
cdkDropList
[cdkDropListData]="displayCharactersArray"
class="item-list"
(cdkDropListDropped)="drop($event)"
>
<div
class="item-box"
*ngFor="let element of displayCharactersArray; let i = index"
cdkDrag
>
<mat-checkbox (change)="onChange($event)" [value]="element">
<span (click)="deactivateCheckBoxClickEvent($event)">
{{ element.viewValue }}
</span>
</mat-checkbox>
</div>
</div>
</div>
</div>
</form>
// CSS
.drag-container {
display: inline-block;
vertical-align: top;
max-width: 100%;
width: 400px;
}
.item-list {
display: block;
}
.item-box {
display: flex;
font-size: 14px;
color: #ffffff;
background-color: #9594947a;
border: 1px solid #9594947a;
border-radius: 4px;
margin-bottom: 5px;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
}
.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);
}
.item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
:host ::ng-deep .item-box mat-checkbox label.mat-checkbox-layout {
margin-left: 5px;
margin-bottom: 1px;
}
:host
::ng-deep
.item-box
mat-checkbox
label.mat-checkbox-layout
span.mat-checkbox-label
span {
cursor: move;
}
:host
::ng-deep
.item-box
mat-checkbox
label.mat-checkbox-layout
span.mat-checkbox-inner-container
.mat-checkbox-frame {
border-color: #e1dfdf;
}
:host
::ng-deep
.item-box
mat-checkbox
label.mat-checkbox-layout
span.mat-checkbox-inner-container
.mat-checkbox-ripple
.mat-ripple-element {
background-color: transparent;
}
:host
::ng-deep
.item-box
.mat-checkbox-checked.mat-accent
.mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: transparent;
}