Currently, I am working on a project involving Angular Material Drag And Drop functionality. I have created a simplified example on StackBlitz which you can access through this link: here
The project involves two lists - one containing pets and the other containing boxes. Users can drag pets and drop them into different boxes. Each box has a limit of how many pets it can contain.
The current setup works fine! However, I would like to enhance it by adding a custom pipe that dynamically filters each list. For instance, users should be able to filter only cats or pets named Rex.
Being relatively new to Angular and JavaScript/TypeScript, I came across a piece of code that helps in creating a custom pipe:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'listFilter'
})
export class ListFilterPipe implements PipeTransform {
// Code for filtering items here
}
In addition to this, I also utilized the example provided in Angular Material's Documentation for handling the Drag And Drop event:
// Code for dropping items here
While the functionalities seem to be working correctly, there is an issue with the way items are handled when applying a filter. The problem arises when a filtered pet is dragged and dropped into a box; the wrong pet is moved. This discrepancy seems to be linked to the index of the unfiltered list used during the drop event.
I am unsure about how to resolve this issue. Any insights or recommendations would be greatly appreciated.
An illustration of the problem can be seen in this gif:
https://i.sstatic.net/4pDOI.gif
Your assistance in resolving this matter would be highly valued. Thank you.