Comments (6)
I have created a pull request with my fix for this issue #94
from ng-drag-drop.
@rrohitesh any chance you can reproduce this in Plunkr?
from ng-drag-drop.
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?
from ng-drag-drop.
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.
from ng-drag-drop.
Thanks, @Sypher1987, I'll take a look.
from ng-drag-drop.
Thanks for the fix @Sypher1987 . Much appreciated.
Fixed in v2.9.1.
from ng-drag-drop.
Related Issues (20)
- Native file drag-drop support
- Drop doesn't move item HOT 2
- Drag data with angular inputs
- Angualr 6 Observable issue HOT 5
- Change frag image before drag
- Creating image when start deragging HOT 2
- Excluding background image from parent div when draggable item is triggered
- cannot drag files? HOT 1
- Need to lock axis during drag
- Not working drag drop in special case for touch devices
- ng-drag-drop package is not compatible with Ivy builds HOT 3
- How to drop the div at certain position?
- How to drop the div at certain position?
- Not compatible to safari browsers
- dragClass has no effect
- Any plans on supporting svg?
- ng-drag-drop. Drop not working
- Please add documentation for changing cursor while dragging when Ctrl-key is pressed/released HOT 1
- In card slider while dragging key board event is not working - like keyleft, keyright
- Error: NgDragDropModule.forRoot returns a ModuleWithProviders type without a generic type argument HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-drag-drop.