我创建了一个带有图像的容器（使用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。数据。
任何想法为什么不起作用？ 预先感谢
答案 0 :(得分：2)
您的代码几乎可以满足所有要求。
问题在于，由于所有带有<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>
Moving directive up in DOM tree stackblitz example.
使用这种方法，CdkDragDrop事件的previousIndex始终等于“ images”数组的长度。我认为也许需要使用CdkDropListGroup，但是将<ngb-carousel>与DragDropModule结合起来似乎是一个问题。如果一起使用，则DragDropModule无法正确识别所拖动项目的索引。
就像我期望的那样，如果仅列出图像，则索引正确：
Without ngb-carousel - stackblitz example.
示例中的另一个问题是，可拖动项应该是带有角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;
}
通过在没有子元素的元素上设置高度，我们可以创建放置区。添加边框和文本是一种很好的UX设计，它可以使我们的最终用户知道可以将项目拖动到给定区域中。
最后但并非最不重要的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);
}
}