在angular 7中拖放
如何从展开面板拖放图元,即使拖放了图元,也应在展开面板中显示图元。我需要第7页的代码。在angular 7中拖放,angular,drag-and-drop,angular7,angulardraganddroplists,Angular,Drag And Drop,Angular7,Angulardraganddroplists,如何从展开面板拖放图元,即使拖放了图元,也应在展开面板中显示图元。我需要第7页的代码。 请帮我解决我的问题 我试图从列表中拖放元素,但拖动后的元素不会显示在列表中 TS 实际结果是我可以拖放元素,但一旦拖放,它们就不会保留在列表中 预期的结果是,我需要元素保留下来,即使它被拖拽掉了嗨,我已经将您的整个源代码复制到了stackblitz中,并设法让一切正常工作。您确定没有处理缓存或缺少任何引用吗?检查此项并比较是否遗漏了任何内容: import {Component} from '@angular
请帮我解决我的问题 我试图从列表中拖放元素,但拖动后的元素不会显示在列表中 TS 实际结果是我可以拖放元素,但一旦拖放,它们就不会保留在列表中
预期的结果是,我需要元素保留下来,即使它被拖拽掉了嗨,我已经将您的整个源代码复制到了stackblitz中,并设法让一切正常工作。您确定没有处理缓存或缺少任何引用吗?检查此项并比较是否遗漏了任何内容:
import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
/**
* @title Drag&Drop connected sorting
*/
@Component({
selector: 'cdk-drag-drop-connected-sorting-example',
templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
})
export class CdkDragDropConnectedSortingExample {
todo = [
'Get to work',
'Pick up groceries',
'Go home',
'Fall asleep'
];
done = [
'Get up',
'Brush teeth',
'Take a shower',
'Check e-mail',
'Walk dog'
];
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);
}
}
}
<div class="example-container">
<h2>To do</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[doneList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
[cdkDropListConnectedTo]="[todoList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>
</div>
.example-container {
width: 400px;
max-width: 100%;
margin: 0 25px 25px 0;
display: inline-block;
vertical-align: top;
}
.example-list {
border: solid 1px #ccc;
min-height: 60px;
background: white;
border-radius: 4px;
overflow: hidden;
display: block;
}
.example-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);
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}