search

kutlugsahin / smooth-dnd

drag and drop library for javascript
MIT License
598 stars 146 forks source link

Initial drag does not work, #60

Open rahulgupta-dev opened 4 years ago

rahulgupta-dev commented 4 years ago

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.

rahulgupta-dev commented 4 years ago

https://stackoverflow.com/questions/58027694/first-drag-does-not-work-for-vue-smooth-dnd-vuejs

rahulgupta-dev commented 4 years ago

@kutlugsahin Can you please help here. Thanks.

cbazza commented 4 years ago

Same issue when using the React wrappers.

rahulgupta-dev commented 4 years ago

@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.

cbazza commented 4 years ago

@rahulgupta-dev thanks for the tip but it didn't work for the react wrapper.

SpeedoPasanen commented 4 years ago

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.

SpeedoPasanen commented 4 years ago

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.

VadymTanasiichuk commented 4 years ago

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.

image

image