javascript - 拖放cdk Angular材质
问题描述
我创建了 1 个带有图像的容器(使用 ngb-carousel)和 3 个放置这些图像的放置区,但是当我尝试在它们之间传输项目时遇到了一些问题。首先,每当我尝试将项目从我的图像容器移动到任何放置区域时,我总是得到相同的索引。
这是我的模板
<mat-card class="card">
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="images"
[cdkDropListConnectedTo]="[doneList, intermedio, menos]"
cdkDropListOrientation="horizontal"
class="contenedor">
<ngb-carousel *ngIf="images">
<ng-template *ngFor="let img of images" ngbSlide>
<div class="picsum-img-wrapper" [cdkDragData]="img" cdkDrag>
<img [src]="path+img.imagen" width="100%" alt="Random first slide">
</div>
</ng-template>
</ngb-carousel>
</div>
<div class="results">
<div class="talents">
<div class="example-container">
<h4>(+) Talento más desarrollado</h4>
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="list2"
[cdkDropListConnectedTo]="[intermedio, menos]"
class="example-list" (cdkDropListDropped)="drop($event)">
<ol class="example-box">
<li *ngFor="let l2 of list2" [cdkDragData]="l2" cdkDrag>
{{l2.nombre}}
</li>
</ol>
</div>
</div>
</div>
<div class="talents">
<div class="example-container">
<h4>Talento Intermedio</h4>
<div cdkDropList #intermedio="cdkDropList" [cdkDropListData]="list3"
[cdkDropListConnectedTo]="[doneList, menos]"
class="example-list" (cdkDropListDropped)="drop($event)">
<ol class="example-box">
<li *ngFor="let l3 of list3" [cdkDragData]="l3" cdkDrag>
{{l3.nombre}}
</li>
</ol>
</div>
</div>
</div>
<div class="talents">
<div class="example-container">
<h4>(-) Talento menos desarrollado</h4>
<div cdkDropList #menos="cdkDropList" [cdkDropListData]="list4"
[cdkDropListConnectedTo]="[intermedio, doneList]"
class="example-list" (cdkDropListDropped)="drop($event)">
<ol class="example-box">
<li *ngFor="let l4 of list4" [cdkDragData]="l4" cdkDrag>
{{l4.nombre}}
</li>
</ol>
</div>
</div>
</div>
</div>
</mat-card>
这是我的拖放功能
drop(event: CdkDragDrop<any>) {
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);*/
const newArray = event.previousContainer.data.filter(e => e.id !== event.item.data.id);
event.previousContainer.data = newArray;
event.container.data.push(event.item.data)
}
}
我尝试使用 transferArrayItem 但它没有工作,因为我得到了错误的索引所以我尝试更改 event.previousContainer.data 和 event.container.data,我使用 event.container.data 但它没有更改 event.previousContainer.data。
任何想法为什么它不起作用?提前致谢
解决方案
您的代码几乎一切都很好。
问题是,由于所有<div>
带有cdkDropList
指令的容器都没有子容器,它们的高度为零,所以没有可以丢弃元素的区域。
例如,一种可能的解决方案是将 cdkDropList 移到更高的位置,<div class="example-container">
或者如果您不希望标题(如 (+) Talento más desarrollado</h4>
)触发拖动事件,那么您需要在下方提供一些高度,以便可以将项目拖动到那里。
<div class="results">
<div class="talents">
<div class="example-container" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="list2"
[cdkDropListConnectedTo]="[intermedio, menos]"
class="example-list"
(cdkDropListDropped)="drop($event)"
>
<h4>(+) Talento más desarrollado</h4>
<!-- Probably no need for this div then !-->
<div>
<ol class="example-box">
<li *ngFor="let item of list2" [cdkDragData]="item" cdkDrag>
{{item.name}}
</li>
</ol>
</div>
</div>
</div>
使用这种方法,事件的 previousIndexCdkDragDrop
始终等于“图像”数组的长度。我认为可能CdkDropListGroup
需要使用它,但看起来<ngb-carousel>
与 DragDropModule 结合是一个问题。如果一起使用,则 DragDropModule 无法正确识别拖动项的索引。
就像我预期的那样,如果简单地列出图像,那么索引是正确的:
没有 ngb-carousel - stackblitz 示例。
您的示例中的另一个问题是可拖动项目应该是带有角度 cdkDropList 指令的 HTML 元素的直接子元素。否则在拖动第二个元素时会出现以下错误:
错误:无法在“节点”上执行“insertBefore”:要插入新节点的节点不是该节点的子节点。
说了这么多,现在让我们尝试使用这些知识并将这段代码重构为一个工作示例。
首先我们的模板:
<div class="talents">
<div class="example-container" >
<h4>(+) Talento más desarrollado</h4>
<ol class="example-box" cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="list2"
[cdkDropListConnectedTo]="[intermedio, menos]"
(cdkDropListDropped)="drop($event)">
<li *ngFor="let item of list2" [cdkDragData]="item" cdkDrag>
{{item.name}}
</li>
</ol>
</div>
</div>
现在一些CSS:
.example-box:empty {
height:50px;
border: 5px dashed #cecece;
}
.example-box:empty:hover:after {
content: 'Drag & Drop items here';
color: #aeaeae;
font-weight: bold;
font-size: 18px;
width:50%;
position: relative;
left:25%;
top:5px;
}
通过在没有子元素的元素上设置高度,我们创建了一个拖放区。添加边框和文本是一个很好的用户体验设计,它让我们的最终用户知道,项目可以被拖到给定的区域。
最后但并非最不重要的 TypeScript:
drop(event: CdkDragDrop<any>) {
// indexes are wrong due to ngb-carousel
if (event.previousContainer === event.container) {
// this is okay, no moving around in ngb-carousel, since it always displays one element;
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
let previousIndex = event.previousIndex;
const element = event.previousContainer.element.nativeElement;
const id = element.getAttribute('id');
// Only indexes of items dragged from carousel needs to be fixed
if (id === this.carouselContainerId) {
previousIndex = event.previousContainer.data.indexOf(event.item.data);
}
transferArrayItem(event.previousContainer.data,
event.container.data,
previousIndex,
event.currentIndex);
}
}
推荐阅读
- php - 会话数据如何从一个页面传递到另一个页面?
- python - 如何优化三个连续的 str.replace() 调用?
- python - Python Tkinter 记录到 ScrolledText 和 FileHandler
- git - 删除提交并取消合并
- node.js - 我可以在 package.json 中提及最新的依赖项吗
- ruby - 使用 axlsx 创建数组公式
- python-2.7 - 在 App 引擎实例之间共享资源的最佳方式是什么
- c++ - while( scanf("%d", &n) ) { ... } 在 Linux 上按 Ctrl+D 时不退出
- javascript - Firebase:事务读取和更新多个文档
- r - 读入一个制表符分隔的文件,观察多行