如何解决Angular CDK:使 cdkDropList 项目可拖动?
最近,我正在研究一种方案,该方案允许用户将项目从一个容器拖动到放置区以存储项目。这将是一种类似于 draw.io 的方式。
然而,cdkDropList 中的项目是粘性的。它无法四处走动。
<div class="left-panel">
<h6>container</h6>
<div class="widget-container"
cdkDropList
[id]="'container'"
[cdkDropListData]="customWidgets"
[cdkDropListConnectedTo]="['container','artBoard']"
>
<div cdkDrag><svg height="50" width="50">
<rect width="50" height="50" style="fill:rgb(0,255);stroke- width:3;stroke:rgb(0,0)" />
</svg>
</div>
</div>
</div>
<div class="middle-workspace">
<div class="svg-container" style="width:300px;height:300px;border-style: dotted;"
cdkDropList
[id]="'artBoard'"
[cdkDropListData]="artBoardWidges"
[cdkDropListConnectedTo]="['container','artBoard']"
(cdkDropListDropped)="onTalkDrop($event)"
>
<app-widget-rect cdkDragBoundary=".svg-container" *ngFor="let artBoardWidge of artBoardWidges"></app-widget-rect>
</div>
</div>
更新于 06/26-02:25 感谢@FunkMonkey33 的回复
下面的代码是我的dragHandler,显然它会将原始项目从其容器复制到目标容器。
onTalkDrop(event: CdkDragDrop<Widget[]>) {
// In case the destination container is different from the prevIoUs container,we
// need to transfer the given task to the target data array. This happens if
// a div has been dropped on a different dropList.
if (event.prevIoUsContainer === event.container) {
moveItemInArray(event.container.data,event.prevIoUsIndex,event.currentIndex);
} else {
copyArrayItem(event.prevIoUsContainer.data,event.container.data,event.currentIndex);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。