CODEWITHSUNDEEP
javascriptangulartypescriptdrag-and-dropangular-cdk
yuvalkrispin
yuvalkrispin

Reputation: 61

Angular [CDK v10+] cant find a proper replacement for "enter" deprecated function in drag and drop CDK

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.

Upvotes: 5

Views: 1504

Answers (1)

vinay
vinay

Reputation: 99

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.

Upvotes: 3

Related Questions