Angular Drag and Drop: can Enter predicate verify at which index the item is dropped?

user_13510730 0
Viewed 1100

I am using the Angular DragDropModule, and I want to drag an object from a list to another. This work perfectly, but I need my object to be dropped only at first or last index of the arrival list. The exemple here shows a list of numbers with an Enter Predicate that allows only elven numbers, but I wonder how I can resolve my problem.

I hope I was clear enough. If you know another way than using predicate to solve my problem it's also fine.

Thank you!

angular-cdk-drag-drop angular predicate
2 Answers

I think I just find a solution to my problem. The event cdkDropListDropped provide a "currentIndex" attribute that represent the index where the item has just been dropped so in the "drop" function, I just added the verification below, before transferring the item:

drop(event: CdkDragDrop<Object[]>) {
   if (event.currentIndex === 0 || event.currentIndex === arrivalList.length) {
       ...
       ...
       ...
    }
}

I hope I explained it well and that it will help someone.

user_135107300

There is cdkDropListEnterPredicate attribute for find the predicate your position.

In Your Html Dropped Element:

[cdkDropListEnterPredicate]="evenPredicate"

In your Ts File:

evenPredicate(item: CdkDrag<number>) {
  return item.data === 1|| item.data === 6;
}

Here, the data is index of our array. item.data === 1 is first position and the item.data === 6 is the last position of the given array.

Ref: Sample Let me know if it works fine.

Thanks.

user_61882270
Related