Jump to content
Search Community

Best way to get a Draggable element out of a scrollable area. - Draggable bug?

rkk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

So I have a left sidebar with a bunch of Draggable elements that I want to drag over to the right side of the page. The thing is that the left sidebar is scrollable, and when the page height is too small, a scrollbar is shown to be able to see all Draggable elements. The problem with this is that by making the container scrollable, the content is limited to it's container size (Behaves pretty much like a overflow:hidden). Is there any good way to be able to drag an element outside of a scrollable container?

 

So far I could come up with several approaches but none seems to be working fine. 

 

1. Make the container overflow:visible when the user starts dragging the element, but this way the scroll position goes to the top and other UI artifacts may happen.

2. Clone the element to be dragged and put it outside the scrollable element as an absolute position over the parent element. But so far I was unable to perfectly align the cloned element with the parent element, and the move back animation may get to the wrong position if the user scrolls the sidebar while animating.

 

Is there any "good" way to do this? Or any workaround that works in a less buggy way?

 

P.D: The Codepen shows the minimum example where you have a bunch of elements inside of a scrollable area. When you try to drag it out of the scrollable area you will see it gets hidden. Any ideas how to overcome this issue?

 

EDIT: So I finally implemented the method 2, and it seems to be working fine on PC, but there is some bug on mobile devices. It seems that on Mobile the onRelease method is never called from Draggable. This does works properly on PC. I updated the Codepen example.

 

Test in on your PC and it will work. Test it on your phone, you will drag the element, but the element wont ever disappear. Is there any way to fix this or is this a Draggable bug?

 

See the Pen rJNLxB by rkkoszewski (@rkkoszewski) on CodePen

Link to comment
Share on other sites

if you want to drag the red items inside their current parent and force scrolling as you drag down, look into autoScroll

 

https://greensock.com/gsap-1-16

 

 

See the Pen YPvdYv by GreenSock (@GreenSock) on CodePen

 

If you want literally take the red items out of their parent and put them inside the blue div, you will probably do best with a cloning technique as shown here by @OSUblake:

See the Pen XJQKVX by osublake (@osublake) on CodePen

 

 

READ THIS: 

 

 

 

 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

Hi @Carl,

I actually edited my original question and updated the Codepen example with a clone technique which is working pretty fine right now. But it seems like I've hit some bug in Draggable on mobile phone where the onRelease is never called. Just try it: 

See the Pen rJNLxB by rkkoszewski (@rkkoszewski) on CodePen

On PC this will work properly. On mobile, the onRelease method is never called, and therefore the cloned element is never removed. (Tested on Android - Chrome)

 

Is this a bug or am I doing something wrong? 

 

EDIT: Ok, it really seems to be a bug with Chrome on Android. I tested it on Firefox on Android and there it works fine too.

Link to comment
Share on other sites

  • Carl locked this topic
Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...