问题描述
我正在使用@angular/cdk/drag-drop
提供的本机Angular 7拖放.
I am using native Angular 7 Drag&Drop provided by @angular/cdk/drag-drop
.
基本上,我只需要在另一个列表中创建一个可排序列表,如下面的代码所示:
Basically, I just need to create one sortable list inside another one as in the code below:
<div class="external-list" cdkDropList (cdkDropListDropped)="drop1($event)">
<div class="external-item" cdkDrag *ngFor="let item of items">
{{item.header}}
<div class="internal-list" cdkDropList (cdkDropListDropped)="drop2($event)">
<div class="internal-item" cdkDrag *ngFor="let row of item.rows">
{{row}}
</div>
</div>
</div>
</div>
这是一个非常示意性的示例,仅用于说明目的.
问题是,当我尝试拖动内部项目时,外部项目被拖动了.
The problem is when I try dragging the inner items outer ones are dragged instead.
在不诉诸第三方软件包的情况下如何解决此问题?
How can I solve this without resorting to 3rd-party packages?
推荐答案
我认为您至少在父列表中需要使用拖动句柄(在cdkDrag
内部元素上的cdkDragHandle
).
I think you will need to use a drag handle (cdkDragHandle
on an element inside cdkDrag
), at least for the parent list.
https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-area-using-a-handle
这篇关于使用本机CDK的Angular 7拖放嵌套列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!