我正在尝试实现一个编辑器,可以拖动一个项目并将其添加到主内容中,问题是当我从源项目容器中拖出时,源项目总是被销毁。
有没有办法强制源项目保持在原地,同时仍然能够拖放该项?基本上,我想要的是复制行为而不是移动行为。
我已经看到了其他与我想要实现的基本相同的问题,但是它们都没有真正帮助我,因为这些问题更多关于如何在技术上完成复制项目,而我想知道如何在UI中实现此行为,因为看到该项目消失非常令人困惑。
我正在尝试实现一个编辑器,可以拖动一个项目并将其添加到主内容中,问题是当我从源项目容器中拖出时,源项目总是被销毁。
有没有办法强制源项目保持在原地,同时仍然能够拖放该项?基本上,我想要的是复制行为而不是移动行为。
我已经看到了其他与我想要实现的基本相同的问题,但是它们都没有真正帮助我,因为这些问题更多关于如何在技术上完成复制项目,而我想知道如何在UI中实现此行为,因为看到该项目消失非常令人困惑。
替换
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
);
}
}
copyArrayItem
吗?我已经通过在drop
方法中不更新源列表来使其与相同的UX工作。同意,拖出的视觉样式是问题所在。 - Ben Racicot导入 import {copyArrayItem} from '@angular/cdk/drag-drop';
并且
将 transferArrayItem
替换为 copyArrayItem
.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);
}
类型Script
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);
}
HTML
<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
drop(event: any) {
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
const prev_idx = event.previousIndex;
const curr_id = event.currentIndex;
// Copy the data.
event.container.data[curr_id] = event.previousContainer.data[prev_idx];
}
}
}
案例2:将列表中的数据复制到特定变量
drop(event: any) {
// Copy the data to my-variable
const prev_idx = event.previousIndex;
this.my-variable = event.previousContainer.data[prev_idx];
}
}
}