如何使用@ angular / cdk创建可拖动和可编辑的列表项? [英] How to create draggable and editable list items using @angular/cdk?
问题描述
我正在尝试创建一个水平可拖动列表,其中应包含可编辑的项目。为此,我使用的是cdk软件包,没有材料,属性为 [contentEditable] ='true'
。但是项目不可编辑。我如何使其正常工作?
I'm trying to create a horizontal draggable list with items that should be editable. For that I'm using the cdk package without material and with the attribute [contentEditable]='true'
. But the items are not editable. How do I get it working?
<div cdkDropList [cdkDropListOrientation]="'horizontal'" class="namingConventionDragDrop"
(cdkDropListDropped)="drop($event)">
<ng-container *ngFor="let item of resultConvention; let i = index;">
<div cdkDrag class="pop naming-placeholder" *ngIf="item.type === 'placeholder'">
{{item.value}}
<fa-icon (click)="remove(i)" icon="times-circle"></fa-icon>
</div>
<div cdkDrag class="pop" *ngIf="item.type === 'text'
[contentEditable]="true" (click)="onItemClick($event)">
{{item.value}}
<fa-icon (click)="remove(i)" icon="times-circle"></fa-icon>
</div>
<div class="pop deactivated" *ngIf="item.type === 'extension'">
{{item.value}}
</div>
</ng-container>
</div>
<div class="naming-convention preview">
<span>Preview:</span>
{{preview}}
</div>
因为我认为这与焦点有关,所以我添加了focus()调用:
Because I thought it has something to do with focus, I added a focus() call:
onItemClick(event) {
event.target.focus();
}
预览用户应该能够编辑类型为文本的项目:
Preview of the frontend. The user should be able to edit items that are of type "text":
推荐答案
角度CDK似乎吸收了左键单击事件。使用右键单击进行编辑。
The angular CDK seems to absorb left click events. One option is to use right click to edit.
这篇关于如何使用@ angular / cdk创建可拖动和可编辑的列表项?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!