html - Angular Material拖放多个元素
问题描述
我正在尝试使用 cdk 实现多项目拖放。
I don't know how to solve the preview when multiple items are selected and drag is starting.
我已经解决了打字稿中的多项行为。
我不知道如何修复 html 和 css 中的预览。
单品预览一切都好
单项html
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div
[ngClass]="movie.checked ? 'item-selected' : 'item'"
*ngFor="let movie of (movies$ | async); let i = index"
cdkDrag
(click)="onTouch($event, i)"
>
<div class="item-placeholder" *cdkDragPlaceholder>{{movie.name}}</div>
{{movie.name}}
</div>
</div>
多项目预览错误
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div
[ngClass]="movie.checked ? 'item-selected' : 'item'"
*ngFor="let movie of (movies$ | async); let i = index"
cdkDrag
(click)="onTouch($event, i)"
(cdkDragStarted)="dragStarted($event, i)"
>
<div class="item-placeholder" *cdkDragPlaceholder>
<ng-container *ngIf="(selectedMovies$ | async).length > 0 else single">
<div *ngFor="let selectedMovie of (selectedMovies$ | async)">
{{selectedMovie.name}}
</div>
</ng-container>
<ng-template #single>
<div>{{movie.name}}</div>
</ng-template>
</div>
<div *ngIf="!(isDragging && movie.checked)">
{{movie.name}}
</div>
</div>
</div>
.list {
margin-bottom: 20px;
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
/*min-height: 60px;*/
height: 700px;
display: block;
background: white;
border-radius: 4px;
overflow: hidden;
}
.item {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
/*height: 700px;*/
}
.item-selected {
background-color: lime;
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
/*background: white;*/
font-size: 14px;
/*height: 700px;*/
}
.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-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.item-placeholder {
background: #ccc;
border: dotted 3px #999;
min-height: 60px;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
解决方案
推荐阅读
- java - 在 Spring Boot Java 架构中简化泛型使用的想法
- javascript - 如果两个或多个请求同时出现会怎样?
- string - SwiftUI:传递字符串以在按钮按下时查看
- reactjs - 如何在 Ionic Modal 中使用 react-hook-form?
- apache-kafka - IDEA在kafka 2.4源码中找不到包org.apache.kafka.common.message
- java - jshell中的命令执行时间
- c++ - 文件结尾 (EOF)
- css - 您可以更改 Tailwind 配置中的基本字体系列吗?
- php - 使用 SimpleXML 从返回空数组的 XML 页面中提取数据
- gradle - 第一次运行和已经运行一次时,Gradle 任务的 `outputFiles` 怎么可能不同?