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

Float plain draggable on load or when scrolled into view #132

Closed vukic-makro closed 1 year ago

vukic-makro commented 1 year ago

Hey there, a question I got from clients is if we can make these divs sort of float on load. What'd be the best approach to do this?

It should look simmilar to this but the issue I'm getting to is that it is hard to make the lines follow the divs https://www.loom.com/share/669f27aaec694229a3d185b1ba0156e4

I was wondering if you have an option to do something on load before draggables are dragged for the first time and stop it after that?

anseki commented 1 year ago

Hi @vukic-makro, thank you for the comment. Sorry, my English is poor. Do you mean that you want to do something when the moving the draggable element started?

vukic-makro commented 1 year ago

Hey @anseki Basically what i need to happen is that before user has interacted with my component the draggable divs float like 10 pixels up and down.

Leader lines which I have in between should also sync with that movement.

All of this needs to happen on load of the page and they should stop floating as soon as there is any interaction with draggable divs from user such as dragging/clicking

anseki commented 1 year ago

You can use position method (A method of LeaderLine, Not PlainDraggable) to update drawn lines for new layout by elements that were moved by your script.

vukic-makro commented 1 year ago

Is there any way to add transition to position method?

When I control position in the way you described it seems to just jump to new position without any transition.

vukic-makro commented 1 year ago

Also when using Anim event i keep getting an error in the console Screenshot 2023-03-29 at 11 06 52

vukic-makro commented 1 year ago

Can you confirm that this is the script that I need to use? https://cdn.jsdelivr.net/gh/anseki/anim-event/src/anim-event.js

anseki commented 1 year ago

Do you mean that you want to update the position of element that is moved by CSS transitions? If so, you can use TransitionEvent to handle events.

anseki commented 1 year ago

For example: https://jsfiddle.net/jwdyr9uo/ Note that this is TransitionEvent of DOM and CSS. It is not PlainDraggable, and it is not LeaderLine also.

anseki commented 1 year ago

No reply came, then this abandoned issue is closed.