Angular 嵌套拖放到另一个列表中
Angular nested Drag And Drop into another list
我有一个场景,我需要将一个功能放入相应的项目中。因此,我在这里使用 angular-material 进行拖放,但它会将功能拖放到项目之外,我想将该功能插入项目内部。
示例如下:https://stackblitz.com/edit/angular-6cshhz-vsskhg?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html[enter link description here]1
我需要做什么配置?
任何人都可以帮助我吗?谢谢!
为了能够拖放,首先将此指令 cdkDropListGroup
添加到父元素。
之后更改数组 done
以也包括掉落的物品:
done = [
{
name: "Apple",
items: [] <-- here will be stored the dropped item
},
之后将下拉列表移动到每个 done
项目的子项。
<div cdkDropList [cdkDropListData]="item.items" class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let it of item.items" cdkDrag>{{it}}</div>
</div>
工作Stackblitz。不要忘记“打开”手风琴以查看“下拉列表”。
我有一个场景,我需要将一个功能放入相应的项目中。因此,我在这里使用 angular-material 进行拖放,但它会将功能拖放到项目之外,我想将该功能插入项目内部。
示例如下:https://stackblitz.com/edit/angular-6cshhz-vsskhg?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html[enter link description here]1
我需要做什么配置? 任何人都可以帮助我吗?谢谢!
为了能够拖放,首先将此指令 cdkDropListGroup
添加到父元素。
之后更改数组 done
以也包括掉落的物品:
done = [
{
name: "Apple",
items: [] <-- here will be stored the dropped item
},
之后将下拉列表移动到每个 done
项目的子项。
<div cdkDropList [cdkDropListData]="item.items" class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let it of item.items" cdkDrag>{{it}}</div>
</div>
工作Stackblitz。不要忘记“打开”手风琴以查看“下拉列表”。