CDK drag and drop is showing only text data while moving the rich card divs angular

Question

I have a list of card rendered in vertical direction. I want to move in between the list. So, I am using Angular CDK drag and Drop feature.

Card has some CSS rules, but while moving the card it shows only text data moving as preview but I want to show it as the whole card is moving.

Here is how it is moving

Here is the HTML code

<div class="workstep-list" cdkDropList [cdkDropListDisabled]="!isEditWorkflow"
    (cdkDropListDropped)="workstepMoved($event)">
    <div class="list-item" *ngFor="let workstep of worksteps" cdkDrag cdkDragLockAxis="y">
        <div class="workstep-info" (click)="workstepDetail(workstep)">
            <i class="workstep-color"></i>
            <span class="workstep-name">{{workstep.name}}</span>
        </div>
        <!-- Transition list -->
        <div class="workstep-transition" *ngFor="let transition of workstep.transitions">
            <i class="fa fa-arrow-right"></i>
            <i class="transition-color"></i>
            <span class="transition-name">{{transition.name}}</span>
        </div>

        <!-- Add new Transition -->
        <div class="transition-add" *ngIf="isEditWorkflow">
            <i class="material-icons">add</i>
            <span>Add Transition</span>
        </div>
    </div>
</div>

Here is the CSS

.workstep-list {
    background-image: radial-gradient(#e1e1e1 1px, #fff 1px);
    background-position: 0 0;
    background-size: 9px 9px;
    padding: 35px;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: calc(100% - 25px);
    overflow-y: auto;
    .list-item {
        border: 1px solid $color-border;
        margin-bottom: 15px;
        border-radius: 2px;
        width: 400px;
        cursor: move;
        &.active {
            border-color: $color-active;
        }
        .workstep-info {
            border-bottom: 1px solid $color-border;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            background: $color-selection;
        }
        .workstep-color {
            min-height: 17px;
            min-width: 17px;
            border-radius: 50%;
            margin-right: 20px;
        }
        .workstep-name {
            color: #444444;
            font-size: 19px;            
            margin-right: 15px;
            font-weight: 500;
        }
        .fa-flag {
            color: #444444;
        }
        .workstep-transition {
            padding: 15px 20px;
            color: #7E91A7;
            display: flex;
            align-items: center;
            background: white;
        }
        .transition-color {
            min-width: 12px;
            min-height: 12px;
            border-radius: 50%;
            margin-right: 15px;
            margin-left: 22px;
        }
        .transition-name {
            font-size: 16px;
        }
        .transition-add {
            color: $hover-color;
            padding: 14px 50px;
            display: flex;
            align-items: center;
            background: white;
            border-top: 1px solid $color-border;
            cursor: pointer;
            i {
                font-size: 20px;
                margin-right: 10px;
            }
        }
    }
}

Am i missing something? or any solution?

Landpoor

Can you please add styles for this? – Psephology

@Psephology updated the question with CSS rules. – Landpoor

Try playing with .cdk-drag-preview class opacity (and other css properties) ;) – Natalienatalina

@Natalienatalina i tried, and yes rules works, but by this mean i have to write the same rules again, is not there any other solution. I checked on the angular cdk site, it works fine – Landpoor

@SunilGarg Unfortunately this is the only way i know and that's what i did in my own app. – Natalienatalina

@SunilGarg - you don't have to write the rules again, just do: .list-item, .cdk-drag-preview { ... } and move this to the root of your scss file (move it outside .workstep-list). – Gwennie

Answer 1

You will have to add some css when you drag div

Ex:

.cdk-drag-placeholder {
    opacity: 0;
}
.cdk-drag-preview {
    border: 1px solid $color-border;
        margin-bottom: 15px;
        border-radius: 2px;
        width: 400px;
        cursor: move;
        &.active {
            border-color: $color-active;
        }
        .workstep-info {
            border-bottom: 1px solid $color-border;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            background: $color-selection;
        }
        .workstep-color {
            min-height: 17px;
            min-width: 17px;
            border-radius: 50%;
            margin-right: 20px;
        }
        .workstep-name {
            color: #444444;
            font-size: 19px;            
            margin-right: 15px;
            font-weight: 500;
        }
        .fa-flag {
            color: #444444;
        }
        .workstep-transition {
            padding: 15px 20px;
            color: #7E91A7;
            display: flex;
            align-items: center;
            background: white;
        }
        .transition-color {
            min-width: 12px;
            min-height: 12px;
            border-radius: 50%;
            margin-right: 15px;
            margin-left: 22px;
        }
        .transition-name {
            font-size: 16px;
        }
        .transition-add {
            color: $hover-color;
            padding: 14px 50px;
            display: flex;
            align-items: center;
            background: white;
            border-top: 1px solid $color-border;
            cursor: pointer;
            i {
                font-size: 20px;
                margin-right: 10px;
            }
        }
}

Psephology

No, I didn't made any change in existing CSS. I just added your css from .list-item in .cdk-drag-preview – Psephology