angular - Angular cdk drap drop - 动态占位符高度
问题描述
我想将占位符高度设置为拖动元素的高度。
现在我使用最小可能元素高度的静态高度占位符。我找不到任何关于如何做到这一点的信息,现在不知道。
组件 html
<div class="taskList" cdkDropList id="{{ 'cdk-task-drop-list-' + categoryId }}" [cdkDropListData]="taskList"
[cdkDropListConnectedTo]="categoryIdList" (cdkDropListDropped)="onDrop($event)">
<ng-container *ngIf="task.isApproved || task.authorId===userId || userAccessLevel >= 3">
<div class="placeholder" *cdkDragPlaceholder></div>
<div class="task">
...
</div>
</ng-container>
</div>
css
.placeholder{
position: relative;
margin-top: 1px;
margin-bottom: 5px;
min-height: 75px;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
vertical-align: middle;
}
有任何想法吗?
解决方案
尝试获取拖动元素的高度,并在此基础上更改占位符高度。
cdkDragStarted(event:any){
this.height = event.source.element.nativeElement.offsetHeight
}
HTML:
<div class="example-box" *ngFor="let movie of movies; let i = index" (cdkDragStarted)="cdkDragStarted($event)" cdkDrag >
<div [ngStyle]="{'min-height.px':height }" class="example-custom-placeholder" *cdkDragPlaceholder></div>
{{movie}}
</div>
推荐阅读
- css - 实现 css btn 类不应用自定义字体
- android - 为什么导航控制器不能声明为类变量?
- android - 如何修复 values.xml:227: 错误:
- 内部元素必须是资源引用或为空
- c# - 使用反射/堆栈跟踪(或其他)获取属性名称?
- python-3.x - 如何在 Tensorflow 2.0 中使用嵌入投影仪
- c# - 对话框中 CalendarDatePicker 的阴影
- java - 关于连接到 oracle 数据库的问题。在哪种情况下必须使用隧道?
- sql - 放置在括号内与单独放置在条件语句中的 AND 和 OR 组合之间的区别
- java - 如何将数据从适配器内的 onBindViewHolder 传递到选项卡
- python-3.x - 您可以将 Python 类实例成员变量设置为 Cython 对象吗?