Drag and Drop Taking More time for large set of data

[rrohitesh]

Hello Obaid,

I am using this library from past 6 month and till now it's very good. But, as my application is growing with huge data sets then drag and drop is taking too much time. Lets say i have 2000 item in a list to drag any item from list and drop it to some area its taking 20-30 seconds, can you suggest what to do in this case?

[ObaidUrRehman]

@rrohitesh any chance you can reproduce this in Plunkr?

[Sypher1987]

This is also an issue i have hit with it, i have done some investigation and found the source of the issue in my case, probably the same issue for rrohitesh.

Because angular uses zone.js for its change detection it will re run a full change detection cycle when any dom event fires, this becomes a problem with large amounts of draggables, in my case it was with a list of 200 draggables that use angular templates. I have updated my fork with a fix for the issue which consists of running the repeat firing dom events(drag, dragover, dragenter, dragleave) in the parent zone so they do not trigger a change detection run.

The only caveat to this is that if you do something with the onDrag, onDragOver, onDragEnter or onDragLeave event emitters that needs to cause a change detection run then with my change you would need to run something in the angular zone to trigger it. That can be done like this;

this.zone.run(() => { console.log('Update now!'); });

I can issue a pull request if you think the change is worthwhile?

[Sypher1987]

This Plunkr should show the issue; http://plnkr.co/edit/bJG679H1G0pzf3PMvUuX?p=preview

If you start performance monitoring in Chrome and then drag and drop an item you can see the call stack running the change detection cycle constantly.

[Sypher1987]

I have created a pull request with my fix for this issue #94

[ObaidUrRehman]

Thanks, @Sypher1987, I'll take a look.

[ObaidUrRehman]

Thanks for the fix @Sypher1987 . Much appreciated. Fixed in v2.9.1.