search

anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
765 stars 96 forks source link

Draggable node recalculate css when scrolling browser window #124

Closed Zander1983 closed 1 year ago

Zander1983 commented 1 year ago

This is an amazing library and is doing a great job for me.

One issue Im having is that as I scroll in the browser, the library changes some of the draggable nodes' CSS. For example:

this looks good: 2022-11-29_13-15-16 (1)

now when i scroll down in the browser, the library recalculates and adds a height attribute to the draggable node:

2022-11-29_13-17-02

Is there some way to prevent this?

anseki commented 1 year ago

Hi @Zander1983, thank you for the comment. Do you mean that the height CSS property was changed by the library? I don't know that issue till now. To reproduce that, could you show an example by using e.g. https://jsfiddle.net/ ?

Zander1983 commented 1 year ago

Yes the height CSS property, I will try to reproduce in Jsfidddle but my app is super complex so not easy

Zander1983 commented 1 year ago

Okay proving very hard to reproduce on jsfiddle. Can you think of any reason with the properties would change on the draggable node as ai scroll? They dont always change, but sometimes the transform, height and width property do...

anseki commented 1 year ago

Sorry, I don't know the "ai scroll". I don't know that issue till now. And it has never been reported yet. Also, many PlainDraggable instances in this page (https://anseki.github.io/plain-draggable/) work fine without changing layout of something. Anyway, I might find something if you can reproduce that for me.

Zander1983 commented 1 year ago

OK I will go through your lib at the weekend and report back, please leave this issue open til then

anseki commented 1 year ago

Ok. :thumbsup:

Zander1983 commented 1 year ago

@anseki When I scroll the browser window, the anima-event library triggers the code here: https://github.com/anseki/plain-draggable/blob/master/src/plain-draggable.js#L1946. event.type is "scroll"

This ends up causing issues here: https://github.com/anseki/plain-draggable/blob/master/src/plain-draggable.js#L496 as the height and transform properties cause the nodes to jump around on screen as I scroll.

Is this listener for the scroll event needed?

anseki commented 1 year ago

Yes, of course that is needed because PlainDraggable has to re-calculate the position. Why did you think that the bBox.height affects the layout of your page?

Zander1983 commented 1 year ago

Why does it need to recalculate position on scroll of the browser window though? I could understand on scroll of the wrapper around the nodes, however not the browser window...

Ya, IM going to look into why the height is wrong. I have the height set on an inner div, not that outer node itself. That may fix it. Will report back.

anseki commented 1 year ago

Why does it need to recalculate position on scroll of the browser window though?

For example, when it gets clientX/Y (for browser compatibility), it has to calculate the position (document base) from view port coordinates. That is, scroll value has to be added to those.

anseki commented 1 year ago

No reply came, then this abandoned issue is closed.