Two Draggable divs to resize a Draggable Element

[swampthang]

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

[swampthang]

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

[ZachSaucier]

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.

[swampthang]

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!

[swampthang]

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.