Javascript 角材料阻力；放置：自定义管道问题

我正在做一些有角度的材料拖放的项目。 我已经做了一个关于StackBlitz的简化示例

宠物清单和盒子清单。 您可以将宠物拖放到框列表的区域中，这样每个框可以包含X个宠物

这管用！ 但我想添加一个自定义管道来动态过滤每个列表，例如仅显示猫或名为Rex的宠物

我是Angular和JS/TS的新手，我发现了这段代码来制作我的定制管道

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“listFilter”
})
导出类ListFilterPipe实现PipeTransform{
转换（项：任意[]，搜索文本：字符串）：任意[]{
如果（！items）返回[]；
如果（！searchText）返回项目；
返回项目。筛选器（项目=>{
返回Object.key（item）.some（key=>{
返回字符串（项[key]）.toLowerCase（）.includes（searchText.toLowerCase（））；
});
});
}
}

我还使用了Material文档中给出的拖放事件示例

drop（事件：CdkDragDrop）{
if（event.previousContainer==event.container）{
moveItemInArray（event.container.data、event.previousIndex、event.currentIndex）；
}否则{
transferArrayItem（event.previousContainer.data，
event.container.data，
event.previousIndex，
事件（当前索引）；
}
}

这很有效！ 但是没有

如果没有过滤器，当宠物被放入盒子时，它会从宠物列表中消失并出现在盒子中。没关系

但是当我拖放宠物时，使用过滤器（例如Name=Rex，索引为1）时，盒子中会放错一个（实际上是“Stella”，索引为0，但隐藏），并且Rex仍然出现在宠物列表中

我希望我的解释是清楚的（对不起我的英语），但你可以在上面提到的stackblitz上尝试：如果你过滤宠物并进行拖放，那么移动错误的宠物

此gif说明了问题：

似乎drop事件获取了未筛选列表的索引，我不知道如何修复它

---

非常感谢。

您好，我也遇到了同样的问题，做了很多研究，我已经做到了这一点，在这种情况下，可以使用该卡上的touchend事件和mousedown事件并传递当前项目和阵列

以下代码用于移动触摸屏触摸端

<div*ngFor="let item of array">
<div (touchend)="dragTouchEndEvent(array,item)">
</div>
</div>

所以在该组件的ts文件中添加

 dragTouchEndEvent(itemArray, item) {
    this.previousIndex = itemArray.findIndex(e => e === item);
  }

现在将event.previousIndex替换为this.previousIndex并清除搜索过滤器

 someMethod(event: CdkDragDrop<any>){
        if (event.previousContainer === event.container) {
              moveItemInArray(event.container.data, this.previousIndex, event.currentIndex);
            } else {
              transferArrayItem(event.previousContainer.data,
                event.container.data,
                this.previousIndex,
                event.currentIndex);
    
            }
//clear your search filter here
}

someMethod（事件：CdkDragDrop）{
if（event.previousContainer==event.container）{
moveItemInArray（event.container.data、this.previousIndex、event.currentIndex）；
}否则{
transferArrayItem（event.previousContainer.data，
event.container.data，
这是以前的索引，
事件（当前索引）；
}
//在此处清除搜索筛选器
}

你解决过这个问题吗？是的。我不得不采取变通办法。我让管道解决方案下降为一个自制的过滤器功能。我现在使用两个列表，一个是“原始”列表，另一个是带有arry.filter（）的过滤副本。现在将显示筛选列表，不适合筛选的每个项目都不会隐藏，只是不存在，因此索引是正确的，每次拖放时，“原始”列表都会更新。有点脏，但对我来说已经够好了

 dragTouchEndEvent(itemArray, item) {
    this.previousIndex = itemArray.findIndex(e => e === item);
  }

 someMethod(event: CdkDragDrop<any>){
        if (event.previousContainer === event.container) {
              moveItemInArray(event.container.data, this.previousIndex, event.currentIndex);
            } else {
              transferArrayItem(event.previousContainer.data,
                event.container.data,
                this.previousIndex,
                event.currentIndex);
    
            }
//clear your search filter here
}