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

Posted 2023-05-08

【中文标题】CDK 拖放在移动富卡 div 角度时仅显示文本数据

【英文标题】：CDK drag and drop is showing only text data while moving the rich card divs angular

【发布时间】：2019-12-20 16:27:16

【问题描述】：

我有一个垂直方向呈现的卡片列表。我想在列表之间移动。所以，我正在使用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;
            
        
    

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

【问题讨论】：

您可以为此添加样式吗？

@Kinjal 使用 CSS 规则更新了问题。

尝试使用.cdk-drag-preview类不透明度（和其他css属性）;)

@KBell 我试过了，是的规则有效，但是这意味着我必须再次编写相同的规则，没有任何其他解决方案。我检查了角度 cdk 网站，它工作正常

@SunilGarg 不幸的是，这是我知道的唯一方法，这就是我在自己的应用程序中所做的。

【参考方案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;
            
        

【讨论】：

不，我没有对现有的 CSS 进行任何更改。我刚刚从 .cdk-drag-preview 中的 .list-item 添加了你的 css