Jump to content
Search Community

Measure centre point of draggable

mikemhz test
Moderator Tag

Go to solution Solved by OSUblake,

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

i created a draggable bar which divides two windows. i grab a percent value for the the bar and in turn the ratio for the two windows. so when the bar is dragged to 70% of the container width, the left/top window is 70% and the bottom/right window is 30%. problem is that the bar position is measured from the left, and when the draggable reaches the far edgeod the bounds, its position is less than 100 due to the width.


i can fix this with some pixel hacking. but it gets very inelegant and hsrd to debug as the page is going to have multiple nested instances of this sliding window model.


i want to create the draggable s$ that it works like a cross-fader, thick handle, precise positioning, overlapping the bounds by half its width. Importantly, the bounds are not a fixed size.


I will provide an example in the morning.

Link to comment
Share on other sites

  • 1 year later...
On 1/9/2017 at 11:58 PM, OSUblake said:

Use xPercent/yPercent to center a nested trigger...



Here's how I've created resizable containers in the past. It uses flexbox, so the basis is the width or height.





Hi @OSUblake

This is awesome. I'm trying to repurpose some logic in your codepen to make mine work. I'm creating a responsive layout grid. And I'm trying to create a resizable sidebar "d". The user should be able to drag the red handle to increase the width. Currently everything is working except that I can't figure how I can constraint my sidebar to a maximum width of 400 and min width of 64?


(I think I've figured out!)

Using .style.width isn't very reliable. I need to use this.x for my if condition

See the Pen YOdeLG by vennsoh (@vennsoh) on CodePen


Link to comment
Share on other sites

@OSUblake I spent abit more time on my responsive grid and I got to a pretty good state. However I notice some weird thing with my draggable sidebar. If you drag your browser window size from ~1024 to ~1220 and if you drag the sidebar out, you will see that the sidebar is actually growing till a max size of 400 which is what our clamp function is doing. However it's growing the size in the opposite way (right hand side instead of left) hence creating horizontal scrollbar. I tried to fix it but in vain. Any thoughts?

See the Pen yxwYBx by vennsoh (@vennsoh) on CodePen


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

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