angular-skyhook
angular-skyhook copied to clipboard
cormacrelf
How to implement scroll while dragging?
Even if this is a poor question without any description, I would really like to know if this is possible with "native" skyhook or not.
Some browsers do it natively (and very smoothly) with HTML5 drag/drop. So skyhook and react-dnd both do nothing, it depends on which backend you choose. You may want to look into https://github.com/hollowdoor/dom_autoscroller for the cases where it is not native, like on most touch devices.
Thanks for the advice. I'll have a look at this. Also I'm gonna have to get a closer look at backends since I'll need to add some animations on dropped and reordered elements and change the mouse cursor. I'm using the sortable package of yours but I could not find any reliable information/docs on how to make a backend and what is the difference between backend and transition. This is not intuitive. I guess I'll have to reverse engineer the backends that already exist. If you have any clues on that I would appreciate it.
PS : Let me know if you want me to open another thread for that.
The docs have references to react-dnd painted all over them. That’s the original library and you should use it as a resource and search term etc. Skyhook has a different name because all the dnd names for Angular were taken, but they are 100% compatible.
There is a mouse backend you could start with if you wanted deep customisations, but there isn’t much of a communication channel to the backend so coordinate things like animation. Maybe an API to get the backend ID would be useful.
Also I don’t know what you’re referring to when you say “transition”. Is that a term I’ve used in the docs?
Well the SkyhookDndModule needs a backendFactory where the term Transition appears but I can't figure out how this is supposed to worked.
Oh. That’s from the multi-backend. The API mirrors dnd-multi-backend, it’s not my term, but it is accurate anyway: the code recognises when someone starts using a touchscreen and swaps the underlying backend out. Multi-backend is just the facade pattern with automatic switching between receivers. It’s called a transition because people with both a mouse and touchscreen (ie most mid-upper range windows laptops) transition between using the mouse and touch. You’ll notice, if you do that with the default configuration, that drags done with your finger will use the manual preview with its lack of styling, but the mouse will use an HTML5 screenshot with opacity.
That’s not really relevant to animations though.
The author of react-flip-move did a demo with react-dnd that I don’t think needed any backend changes. Maybe take a look around for a similar Angular library for animating generic list reordering. I have personally tried with the @angular/animations declarative animation library and it was really not suitable.
http://joshwcomeau.github.io/react-flip-move/examples/#/scrabble?_k=4q2pe0
I've never really worked with animations so I can't say for sure but from what I read, it looks like I will have to listen to events and that a custom backend would (again that's just a conclusion based on what I understand) do the trick. I might be wrong tho.
Thank you. I'll take a look at his work then. I was hopping to use @angular/animations too ... I'll let you know if I succeed. Maybe you'd want to add it in your examples as it might help others.
That demo would maybe work for reordering. For moving into place at the end of a drag, custom backend would probably be the last thing to try, but I wouldn’t start that way. Try using custom drag layer that doesn’t immediately hide elements on drop, and use a shared service to inform the layer where to animate it to. You could work out this position when the transit element knows to make itself visible again, and the transit’s reappearance should also be delayed by the same duration.
(Or transit element that’s knows how to animate in from the last recorded position of the dragged element from a monitor.)