Open rahulgupta-dev opened 4 years ago
@kutlugsahin Can you please help here. Thanks.
Same issue when using the React wrappers.
@cbazza I have found a workaround for this issue, you can use some delay while init the wrapper. It did work for the vuejs wrapper. Thanks.
@rahulgupta-dev thanks for the tip but it didn't work for the react wrapper.
Problems with the Angular wrapper too. The Y-coordinate is calculated incorrectly for the first drag. It's like you'd be dragging 200px above where you're actually dragging. Drop first time and drag again, works perfectly after that.
If I remove the component from DOM with *ngIf after doing the first buggy drag and then bring the component back, it still works. Showing and hiding the component and then doing the first drag doesn't help. It always needs that first buggy drag to be done.
Resizing the window fixes this. So some initialization that also happens on resize happens too early. This perhaps? Wonder if there's a way to call invalidateContainerRectangles from Angular..
window.addEventListener('resize', function () {
invalidateContainerRectangles(containerElement);
});
Edit: Tried window.dispatchEvent(new Event('resize'))
after my component has rendered the container. It seems to reduce the likelyhood of this bug but not always. Sometimes I still just have to touch a draggable one time before it starts working.
This issue occurs in case if container with draggable content placed inside scrollable parent container. You can observe it each time the parent container is scrolled. That's happens because an old offset is used in calculations (probably, I haven't investigated whole sources :) )
It can be fixed in Angular via workaround provided below:
@HostListener("window:scroll", ["$event"])
onScroll() {
window.dispatchEvent(new Event("resize"));
}
layoutManager calls invalidateContainerRectangles(containerElement)
method on 'Resize' event, so, the hack above triggers reevaluation of Y-coordinate.
https://github.com/kutlugsahin/smooth-dnd/blob/master/src/layoutManager.ts#L67
I can assume that addEventListener for 'scroll' event in layoutManager could fix the problem. Also, I guess that it's better to check not only window but parent container events too to avoid similar situations. Just thoughts...
Link to stackblitz app with bug reproduction: https://stackblitz.com/edit/angular-yla7qe?embed=1&file=src/app/app.component.ts
Just uncomment this line // window.dispatchEvent(new Event("resize"));
to 'fix' bug.
When the component is loaded and we start the drag for the first time it does not work and drop back to the same place, it starts working in the second drag can you please help resolving this issue.