ulmix
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by ulmix
-
-
Anyone? Up.
-
I understood the question a bit differently - I think he was asking if, when dragging an element's x/y (NOT scrolling), and he reaches the edge of a scrollable container, if it'd automatically scroll for him. The answer is "no". Sorry, there is no such feature in Draggable. It'd be a bit tricky because it'd have to be able to sense any and all nested containers and try to figure out which one should scroll if there are more than one.
I have exactly the same question. I need to drag some small elements inside a horizontally scrollable container, and I want that container to scroll automatically when element or mouse pointer is somewhere near left or right bound.
Here's codepen:
See the Pen EaWjZG by ulmix (@ulmix) on CodePen
Algo: onDrag:
1) check where the mouse pointer is currently:
1a: if near bounds, go to 2
1b: if not, clearInterval(scrolling)
2) check if we're scrolling already. If not, then start setInterval, where I change scrollLeft of container, and trying to change draggable element position and update() it.
onDragEnd: stop scrolling if it is in process.
Unfortunately, update() behaves VERY strange here: element jumps all over the place. Why? I can't understand.
And considering your "It'd be a bit tricky because it'd have to be able to sense any and all nested containers" - that's not right. Solution is simple: check only parent container by default, and give us option to set custom element as "scroll container".
So please, GSAP developers, hear me: the autoscroll option for your Draggable plugin is very desirable!
=====
UPDATE, additional questions.
tried to implement more simple autoscroll, based on mousemove instead of setInterval - just like jQuery UI Draggable works. Here's what I've got:
1.
See the Pen KwWpbB by ulmix (@ulmix) on CodePen
- implementation for XY drag. Just works.2.
See the Pen NPpqoY by ulmix (@ulmix) on CodePen
- implementation for X drag (" type: 'x' " added) - strange behaviour, drag element jumps far forward when trying to scroll3.
See the Pen pveJYx by ulmix (@ulmix) on CodePen
- implementation for X drag (" lockAxis: true " added) - works normally.So, the question is: why option 2 - with type: 'x', but without lockAxis: true - is not working properly?
Auto-scroll for GSAP draggable
in GSAP
Posted
Yes, that works. Thanks.