jQuery UI Resizable with GSAP Draggable

[swampthang]

I noticed, after upgrading to the latest (2.x) version of GSAP that my old code for integrating jQuery UI's resizable was not longer working. I forked a previous codepen from a recent post and added the fix for that in case anyone else has this issue. The difference is twofold:

 

First, I had to set `dragClickables: false` in the draggable setup even though it's my understanding that Draggable ignores anything with the attribute of 'data-clickable' by default (note that I'm adding the data-clickable attribute in the create callback for resizable).

 

Second, had to add this in the `create` callback for resizable:

$('.ui-resizable-handle').attr('data-clickable',true);
$('.ui-resizable-handle').on('mousedown', function(){
  draggable[0].disable();
});

and this in the `stop` callback:

draggable[0].enable();

 

I hope that helps anyone else who might encounter this issue.

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

[GreenSock]

Just for the record, we did switch to dragClickables being true by default in 2.1.0, but there was a regression that prevented that value from being set/read properly until 2.1.2, so please make sure you're using the latest version. 

 

Also, you said "it's my understanding that Draggable ignores anything with the attribute of 'data-clickable'" but I just want to clarify that the value matters. In other words, it's not just having that attribute that matters - it's that it's set to "true" or "false". 

[swampthang]

Hey, Jack. Thanks for the reply. In the codepen, and in my app, I'm using 2.1.2. Also, in the app, I was setting the data-clickable attribute like this...

 

$('.ui-resizable-handle').attr('data-clickable',true);

 

It might have been the order in which things were being set up but I'm waiting until the resizable is set up to be sure the handles exist. Either way, I've got it all working in the app. Just so you know, the only reason for my post was in case anyone else might have been trying to incorporate both and were unable to get it to work. 

[GreenSock]

3 hours ago, swampthang said:

the only reason for my post was in case anyone else might have been trying to incorporate both and were unable to get it to work. 

 

Yep, I figured as much and I sure appreciate it!