Jump to content
GreenSock

Praney Behl

Draggable Resize

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 guys,

 

I am just playing around with the the Draggable plugin and its awesome. As it can be used for not only dragging but also rotate or scroll content, I wonder if there is a way to make it to resize an element onDrag?

 

Has anyone done that? Does anyone know how it could be done?

 

Thanks,

Praney

Link to comment
Share on other sites

Hmm I've not seen anyone provide a sample of that here, but I can't imagine it would be very difficult to implement. Feel free to have a crack at it and return for help if you get stuck.

 

This thread might also be of use (using jQueryUI Resizable).

Link to comment
Share on other sites

Well, to do it "right", it's much more complex than it may seem. I built a Flash-based tool called TransformManager years ago that handles multiple selections, rotation, resizing, moving, etc. (see http://www.greensock.com/transformmanageras3/) so I'm pretty familiar with some of the common "gotchas" that tend to hit folks when trying to build that type of tool. While it's relatively easy to make a non-rotated element resizable, it's MUCH more difficult when you introduce rotation, skewing, and [especially] multiple selections that may each have different rotations/skews/scales. Then factor in arbitrary transformOrigins and arbitrary transforms that are applied to ancestor elements, and it'll give you a headache :)

 

We have been asked many times to build something like TransformManager in JS, but that's a pretty big job and we have been very focused on the animation platform because frankly that's what the web needs most right now (in my opinion). The animation tool sets out there for HTML5 stuff are...well...bad. Believe it or not, Draggable was born simply as a way to demonstrate a practical use case for the ThrowPropsPlugin animation tool. Clearly it addressed a common pain point and we've done a lot to help push it further to accommodate many needs, but it's not intended to be a full-blown TransformManager-like transformation tool with multiple selections and scaling. That's a different beast that'll take a lot of time to build the "right" way.

 

We have been working on a tool that will be very handy for empowering that, and we hope to release it in another month or two. It lets you locate any point in 2D space in any element in a global or local context, and translates between the two (globalToLocal() and localToGlobal()) but we're not quite ready to release that yet. "Shockingly Green" and "Business Green" members can get early access by request. 

 

Anyway, the short answer to your question is "no, not yet", but you could certainly try to adapt Draggable to suit your needs. Resizing isn't "officially" supported right now, that's all. If anybody could make Draggable do what you want (besides me), it's Jamie, so maybe he'll give it a shot :) 

  • Like 4
Link to comment
Share on other sites

Thanks guys, 
 

I hope there was an easy solution.

 

Cheers!

Link to comment
Share on other sites

Haha I hadn't planned on doing that, thanks for the challenge Jack!

 

It's a very naive implementation and doesn't consider any of the issues Jack mentioned, but hey, it drags and resizes... I used a little jQuery because I'm lazy, but you can modify it to whatever framework you use (or native javascript...). Tested in latest Firefox, Chrome, IE9 and an iPad2.

 

See the Pen fjJah by jamiejefferson (@jamiejefferson) on CodePen

  • Like 2
Link to comment
Share on other sites

I agree with Jack, until its only about dragging and resizing, it works fine. But if you try to rotate the element and then try to resize, you will experience some unexpected behaviour, here:

 

See the Pen JtAac?editors=111 by praneybehl (@praneybehl) on CodePen

Link to comment
Share on other sites

Haha that's not "unexpected"; that demo was never intended to accommodate for any rotation or transforms etc. If you want rotation and resize, it's in your court if you want to try and get it working.

 

If you have a Shockingly/Business Green membership then Jack's new point tool would likely be helpful in this endeavour.

Link to comment
Share on other sites

Thanks Jamie,

Well I do have the Business Green Membership. 

Darn! Should have read the whole post carefully. Thats what you get for 2-3 hours sleep.

 

@Jack, mate how can I get my hands on the tool?

 

Thanks,

Praney

Link to comment
Share on other sites

Jamie, I tested your

See the Pen fjJah by jamiejefferson (@jamiejefferson) on CodePen

on Galaxy S3 (Android 4.3 Jelly Bean) .. and it worked real nice! :)

Link to comment
Share on other sites

Praney, I emailed you about the new tool. 

Link to comment
Share on other sites

Thanks Jack 
 

Looking forward to the docs :)

Link to comment
Share on other sites

  • 9 months later...

Hi Jamie, is there a way to make the handle move on a 45 degrees line so that the .draggable remains a square? Thanks

Link to comment
Share on other sites

Hi Cirox,

 

You can constrain the shape by doing a little math...

var offset = this.x * Math.tan(45 * Math.PI / 180);
TweenLite.set(drag, { width: this.x, height: offset });
TweenLite.set(handle, { top: offset });

But an even easier approach would be to do it as a ratio. 45 degrees would be 1:1, so just set the height and width equal to each other.

TweenLite.set(drag, { width: this.x, height: this.x });
TweenLite.set(handle, { top: this.x });

CodePen URL: 

See the Pen emWwzb?editors=001 by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

I probably should have mentioned that the code above will only work if the shape is a square. For a rectangle, you will need to figure out the ratio or angle before you start to drag. 

 

CodePen URL:

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

 

 

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

So, there's a new tool that allows you to resize a draggable element?

Link to comment
Share on other sites

Nope, nothing beyond Draggable. You can certainly use Draggable to do some basic resizing of width/height as Blake has shown in the past, but if the element is rotated or you need advanced controls, that's a different story :) 

Link to comment
Share on other sites

Not sure if this is gonna help anyone but thought I'd post this new Codepen. I have a nested SVG inside a group element. I forked this from one of Diaco's. It allows for resizing, rotating and dragging. I saw a Codepen from someone named Anonymous and was thinking it was forked from one of his but couldn't find it. Anyway, here it is if it helps anyone.

See the Pen WxEzgj by swampthang (@swampthang) on CodePen

  • Like 1
Link to comment
Share on other sites

Weird, in the Codepen rotate works great but in my application I can get the rotation to start but not continue for a full revolution. Is there a common cause for this someone might give me a heads-up on? I can rotate it if I move way out away from the SVG I'm trying to rotate. Like waaaaay out.

Link to comment
Share on other sites

Not exactly sure, but when I built something like this years ago (in Flash) one of the challenges was handling when the rotational value crossed the 180 degree mark and the Math.atan2() flipped (negative/positive). I don't have time to dig into what Diaco (or you) built at the moment, but I did also notice that it was odd that bounds was set to "body" on a rotational Draggable. The bounds refer to the max/min values allowed for the properties affected by the drag (rotation in this case). So it'd be more common to see bounds:{maxRotation:360, minRotation:-360} (not selector text). Hopefully that'll get you going in the right direction. Sorry I don't have time to pull it all apart right now. 

  • Like 1
Link to comment
Share on other sites

Ahhh, yea, that was a mistake. I've removed the bounds on the rotate in Codepen. Still not sure what's up with the really wide arc needed to rotate the SVG. Oh, and man, you guys have been awesome responding to these posts. I've never seen anything to rival it. Thanks so much!

  • Like 1
Link to comment
Share on other sites

The weird behavior in the rotation had something to do with my layout in the app. I had a max-width container in which everything was placed. There were some controls to the left of the editing area, all in one row. If the overall window width was much wider than the container it seemed to affect the rotation proportionally - required a much wider arc to rotate the SVG. Also, having the columns to the side of the editing area that took up about half of the screen width seemed to contribute to it as well. I placed the edit area so that it was in its own row and allowed the container to be 100% and it fixed the problem.

 

See the Pen akyZOr by swampthang (@swampthang) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

I'm seeing the same thing when trying to use draggable rotation in a css zoomed container. Taking Jack's advise, I created a simple, to-the-point, paired-down codepen as a demo. When you first load the demo the container is 100%. Changing it to 75% and then 50% you see that it becomes increasingly painful to try to rotate the SVG.

 

Is there a workaround for this?

 

See the Pen rLvvRr by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

According to my research, "zoom" is not in the CSS spec, and it is generally frowned-upon in favor of transforms. Not only do transforms have better support (Firefox and Opera offer no support for "zoom"), but transforms also don't affect layout thus they'll perform better. 

 

https://css-tricks.com/almanac/properties/z/zoom/

http://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css

 

Again, I'm pretty sure you could resolve this by simply using transforms to do your "zooming". 

  • Like 3
Link to comment
Share on other sites

D'oh! What in the world was I thinking?! (slaps self in head) Thanks so much, Jack. I added a scale to the container and it works perfectly! Doesn't even affect the size of an exported video which is an awesome thing.

 

See the Pen akyZOr by swampthang (@swampthang) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

Hi Guys,

I know it's been a while since this discussion is started but I'm struggling with a couple of small issues.

 

I've followed OSUblake examples to create a resizable draggable. All is good in that part.

 

My problem now is that I'm trying to define bounds on it but it's being a pain because on the examples provided (basically a child draggable inside a parent one, when dragged expands the parent - 

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

) the child draggable resets it's coordinates, as expected, every time the parent one moves to a different place.

 

To create some context, based on the example provided on the codepen created by OSUblake, I'm considering the parent draggable the square and the child draggable the expand handle.

 

How would you suggest a simple solution for creating bounds for the whole group. Meaning I would still be able do drag around the square but I don't want it to be able to expand to outside of a specified limit. Remember the handle draggable resets it's x coordinates every time we move the square.

 

To make simple I'm only expanding over the X axis.

 

Any help on this would be brilliant.

 

Thanks.

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