角CDK拖放:不要移动源项
角CDK拖放:不要移动源项
提问于 2019-05-13 13:57:13
我试图实现一个编辑器，在编辑器中可以拖动一个项目来将其添加到主内容中，问题是当我从源项容器中拖出时，源项总是被销毁。
是否有一种方法可以在仍然可以拖放项目的情况下强迫源项停留在原来的位置？基本上，我想要的是复制行为，而不是移动行为。
我已经看到了其他与我想要实现的目标相对应的问题，但这些问题都没有真正帮助我，因为这些问题更多的是关于如何从技术上完成对项目的复制，而我想知道如何在UI中实现这种行为，看看这个项目是否消失是非常令人困惑的。
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-02-06 06:29:55
替换
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}与
drop(event: any) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
copyArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}Stack Overflow用户
发布于 2020-09-21 07:58:46
导入import {copyArrayItem} from '@angular/cdk/drag-drop';
和
将transferArrayItem替换为copyArrayItem
Stack Overflow用户
发布于 2022-08-15 14:26:22
上面所有的解决方案都很好，但是有一个问题是在元素删除后发生的，所以我进行了git转换，并在下面找到了解决方案。
风格
.drag-container {
width: 400px;
max-width: 100%;
margin: 0 25px 25px 0;
display: inline-block;
vertical-align: top;
}
.drag-list {
border: solid 1px #ccc;
min-height: 60px;
background: white;
border-radius: 4px;
overflow: hidden;
display: block;
}
.drag-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.drag-box:last-child {
border: none;
}
.drag-list.cdk-drop-list-dragging .drag-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}类型标
menu: any = [
{ title: 'pork', price: 12, id: 1 },
{ title: 'duck', price: 12, id: 2 },
{ title: 'chicken', price: 12, id: 3 },
{ title: 'beef', price: 12, id: 4 },
{ title: 'soup', price: 12, id: 5 },
];
table: any = [];
drop(event: any) {
if (event.previousContainer !== event.container) {
copyArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
}
if (event.previousContainer.data) {
this.menu = this.menu.filter((f: any) => !f.temp);
}
}
exited(event: any) {
const currentIdx = event.container.data.findIndex(
(f: any) => f.id === event.item.data.id
);
this.menu.splice(currentIdx + 1, 0, {
...event.item.data,
temp: true,
});
}
entered() {
this.menu = this.menu.filter((f: any) => !f.temp);
}<div cdkDropListGroup>
<div class="drag-container">
<h2>To do</h2>
<div class="drag-list" cdkDropList #menuList="cdkDropList" [cdkDropListData]="menu" cdkDropListSortingDisabled [cdkDropListConnectedTo]="[tableList]" (cdkDropListDropped)="drop($event)" (cdkDropListExited)="exited($event)" (cdkDropListEntered)="entered()">
<div class="drag-box" *ngFor="let item of menu" cdkDrag [cdkDragData]="item">{{item.title}}</div>
</div>
</div>
<div class="drag-container">
<h2>Done</h2>
<div class="drag-list" cdkDropList #tableList="cdkDropList" [cdkDropListData]="table" (cdkDropListDropped)="drop($event)">
<div class="drag-box" *ngFor="let item of table; let idx = index" cdkDrag>{{item.title}}</div>
</div>
</div>
</div>来源1：stackblitz
来源2：github
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56113939
复制相关文章
相似问题
腾讯云开发者
