How can I customize the style in cdk draggable mode?

I have programmed a small list of characters. These contain mat-checkboxes and you can move them around using Cdk Drag Drop. All good so far! Now would also like to customize the style draggable as well. I read that you can do it with the class .cdk-drag-preview. I also use this class for box-shadow. I tried to access mat-checkboxes via .cdk-drag-preview and style them. Unfortunately this did not work. Do you know how to do this?

My WORK in Stackblitz: https://stackblitz.com/edit/angular...p/cdk-drag-drop-connected-sorting-example.css

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;
}

Continue reading...