2

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!

Vincent Gilabert
  • 53
  • 1
  • 9

2 Answers2

2

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.

Vincent Gilabert
  • 53
  • 1
  • 9
0

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.

Arunkumar Ramasamy
  • 751
  • 4
  • 8
  • 1
    Thank you for your reply. Maybe my question wasn't clear, but what I want is to allow the drop of an item only at the beginning or at the end of the array, regardless the type of the item. Your prediacate seems to allow only a 1 or a 6 to be dropped, which is not what I am looking for. – Vincent Gilabert Aug 02 '20 at 15:50