我正在尝试使用cdk进行多项目拖放。
选择多个项目并且开始拖动时,我不知道如何解决预览问题。
我已经解决了打字稿中的多项行为。
我不知道如何在html和css中修复预览。
<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);
}