Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

Two Draggable divs to resize a Draggable Element

Recommended Posts

In @OSUblake's pen: 

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

 an embedded draggable element is used to resize a parent element that is also draggable. It works good when you only have one draggable element that is always positioned at the width and or height of its parent. I need to be able to resize a parent element on the x-axis from a handle at x=0 and another one at x=parent.width. 

 

In the past, I've used draggable on the parent and JQuery UI's resizable inside the Draggable. Now, I have to be able to resize and position the parent to subpixel accuracy so can't use JQuery Resizable anymore because it only supports css - left/top and most browsers force round left/top to the nearest pixel. 

 

In the pen, you can see that the right handle works fine but the left one is a problem I can't seem to get around. The challenge is that both handles need to be contained inside the parent because I'll have multiple instances of the parent element in the same container.

 

I tried to see if I could reset the left handle to 0 on each cycle of onDrag after getting the deltaX value so that the left handle would never appear to move from it's position at x=0 but that caused some problems. This is a real quandary in my feeble little pea-brain. Any help would be greatly appreciated.

 

Thanks!

See the Pen qBNMQjz?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Ok, I forked the above and used the update method. Getting closer but whenever I drag the left handle, you can clearly see the right handle jumping around a bit. If there's a better way to do this I'd love to know. Also, setting the width is still rounding to integers. Is there no way to set a subpixel width?

 

See the Pen OJXorgE?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

1 hour ago, swampthang said:

Is there no way to set a subpixel width?

Nope. But you could keep a proxy for the width in subpixel form. 

 

Why are you still using the old version of GSAP? We highly recommend GSAP 3.

Link to comment
Share on other sites

On 11/7/2020 at 3:23 PM, ZachSaucier said:

Why are you still using the old version of GSAP? We highly recommend GSAP 3.

I plan to make the conversion at some point but the desktop app i've created is pretty involved/complex - the current and all previous versions allow users to save and reopen files using data created in GSAP 2.x - using all the old stuff including gsTransform values, etc. I have a lot of other things weighing on me right now and just don't have the bandwidth to make the change right now. 

 

But I really look forward to having the time to switch. Really anxious to do that!

Link to comment
Share on other sites

Getting back to the issue of not being able to set a subpixel width, I've found that I can add a subpixel padding to the handle on the right which forces the browser to see the calculated width as subpixel.

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.
×