After going through many stack overflow answers I am posting this question. I have a requirement to enable drag-and-drop on the dialog modal. I am using this on the table rows. I can drag and drop the rows but the preview is always behind the modal. I have also come across this https://stackblitz.com/edit/angular-cdk-droplist-mat-dialog-solve?file=src%2Fstyles.css,angular.json,src%2Fapp%2Fparent%2Fparent.component.css,src%2Fapp%2Fapp.component.css but I don’t see any difference in the code. Can anyone help me here? I am also attaching the screenshot for
the same.
[cdkDragPreviewContainer]=”parent” is not helpful since it is moving the preview to the extreme right (out of the screen)
drop(event: CdkDragDrop<string[]>) {
console.log('event::::', event);
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
console.log("event.container.data[event.currentIndex]:::", event.container.data[event.currentIndex])
if (event.container.data[event.currentIndex]['freeze'] === false) {
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}
} .example-box {
cursor: move;
}
.example-box.cdk-drag-disabled {
cursor: default;
}
.cdk-drag-preview {
background : white;
padding : 20px 10px;
color : rgba(0, 0, 0, 0.87);
display : flex;
align-items : center;
font-size : 14px;
left: 0;
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);
transform: translate(0);
}
.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);
}
<kyn-side-drawer [open]="open" size="md" titletext="Column Settings" labeltext=""
(on-close)="applyOrCancelChanges($event)" submitbtntext="Ok" cancelbtntext="Cancel">
<kyn-global-filter>
Show:
<kyn-checkbox value="hiddencol"> Hidden Column </kyn-checkbox>
<kyn-checkbox value="visiblecol"> Visible Column </kyn-checkbox>
</kyn-global-filter>
<kyn-table>
<kyn-thead>
<kyn-header-tr>
<kyn-th>Visible</kyn-th>
<kyn-th>Column</kyn-th>
<kyn-th>Freeze</kyn-th>
</kyn-header-tr>
</kyn-thead>
<kyn-tbody cdkDropList class="example-list" [cdkDropListData]="items" (cdkDropListDropped)="drop($event)">
<ng-container *ngFor="let row of items">
<kyn-tr [rowId]="row.id" [key]="row.id" [selected]="row.show" [locked]="row.freeze" [preventHighlight]="row.show"
[dimmed]="!row.show" [checkboxSelection]="true" class="example-box" cdkDrag [cdkDragDisabled]="row.freeze">
<kyn-td>{{row.data | translate}}</kyn-td>
<kyn-td>{{row.freeze}}</kyn-td>
</kyn-tr>
</ng-container>
</kyn-tbody>
</kyn-table>
</kyn-side-drawer>