Prevent change detection during drag

[ajshapiro]

Is there a way to prevent change detection from occurring while dragging an element?

If in my own code, I would typically add the event listener using ngZone to run outside Angular, but not sure how to effect the same thing here since the event listeners are being added within the service.

[ajshapiro]

It appears that the event listeners are being added in the setOptions method of the DragulaService object, so I resolved this issue by calling setOptions within a function invoked using the runOutsideAngular method of the NgZone object.

[jeandat]

Hi, I face the same issue and I admit I don't understand the logic behind it but that's probably a lack of knowledge in angular behavior.

If you use as model (dragulaModel) an array provided via @Input() and implement ngOnChanges, there is a lot of call to ngOnChanges while dragging. The more you drag, the more it is called.

Can someone explain me why dragging an item with dragula provoke so much call to ngOnChanges ? I don't see the logic behind.

FYI, I'm not providing to dragulaModel what I received via @Input() so drag&drop operations should not impact in any way input parameters.

The same happens if you take an item and just stay on place, moving a little bit your mouse (a few pixels) without changing the item place.

If necessary, I can provide a sample to illustrate.

[cormacrelf]

I would count myself as a change detection semi-expert after optimising angular-skyhook, but I no longer have a large ng2-dragula codebase to validate performance improvements on. In fact, I don’t use the library at all any more.

If anyone else with an interest in perf can contribute on this, that would be great. Also a new maintainer would be welcome. I’ve closed nearly 200 issues and pushed out v2, I think I’m done here.

[lmessinger]

I'm facing a somewhat similar issue. All angular's event handlers and directives disappear after dragging. I'm not using dragularModel but rather subscribe on the drop event. For example, my html looks like this:

<div dragula="myarea">
<my-directive>
   <div (click)="onclick()"> </div>
</my-directive>
</div>

Once i drag, no more onclick calls. And that goes for any other angular directives, like ngfor and more

any ideas? @ajshapiro Wondered when excactly are you triggering runOutsideAngular and if it could help

many thanks

EDIT: this happened since I was sorting, and the dropped element did not include all Angular's event handler. it was not an Angular element anymore. I destroyed it and it re-added it using my model. lesson: everything stems from the model