4

I was mistakenly worked on an angular version older then 10 in stackblitz (some sort of a code-pane).

here I found the moved the function enter github. but it didn't helped at my case. on a grid based drag and drop, that have the capability to drag between different draggable-containers. forked from angular dragdrop grid. The only error that pooped when I upgrade to the latest version (12.1.2) is here

this.placeholder.enter(
  drag,
  drag.element.nativeElement.offsetLeft,
  drag.element.nativeElement.offsetTop
);

error: Property 'enter' does not exist on type 'CdkDropList<any>'

the only reference I found is this page from stack-overflow. when I try the solution the behaviour is messed-up and the console is logging this error ncaught RangeError: Maximum call stack size exceeded.

currently this is the state.

I wish to transfer this functionality to the latest CDK version without losing the functionality.

when i switch back and forth between version i notice that the behavior of cdkDropListEnterPredicate is not working as its use to.

in v9 cdkDropListEnterPredicate is calling the functions every pixel but for v 12 the behavior has changed.

to see the error in action go to the package.json and change the from "@angular/cdk": "9.1.2" to: "@angular/cdk": "12.1.2" I have tried to use dragRef and dropListRef but failed.

yuvalkrispin
  • 51
  • 3

1 Answers1

2

Please Click for sample example...... [here] (https://stackblitz.com/edit/angular-cdk-drag-drop-sortable-flex-wrap-if3hjb?file=src/app/app.component.html)

now with the new version we can replace all the previous method with single one(cdkDragEntered) and it will take care of all things.

vinay
  • 89
  • 4
  • This needs to be accepted as the answer. It is a far better algorithm than `cdkDropListEnterPredicate` and works out-of-the-box in Angular 12. – Alex Gurrola Jul 22 '22 at 05:54