CDK 拖放仅显示文本数据，同时移动富卡 div 角度

Question

我有一个在垂直方向呈现的卡片列表。我想在列表之间移动。所以，我正在使用Angular CDK拖放功能。

卡片有一些 CSS 规则，但是在移动卡片时它只显示文本数据作为预览移动，但我想在整个卡片移动时显示它。

这是它的移动方式

这是 HTML 代码

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

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

我错过了什么吗？或任何解决方案？

Answer 1

拖动div时必须添加一些css

前任：

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