Help me understand livesnap on a draggable

[Rick May 18 Likes (Newbie)]

I've read the docs over and over, but I just cannot seem  to fully grasp liveSnap.  When I've needed it, I've managed to find a solution through trial and error without completely understanding what is going on.

 

However, now I've got a more  complicated situation where I believe I need liveSnap, but I cannot figure it out.  I've linked to my Codepen  below.  I found this window example somewhere, no doubt written by one of you guys, and adapted for my own use.  It works great, except that I want to limit the smallest window size so that it cannot collapse in on itself.  Let's say that minimum window size is 200x100.  How would that be accomplished?

 

https://codesandbox.io/s/window-resizable-n2kwz?file=/src/index.js

 

Thank you once again,

Rick

 

 

[ZachSaucier 6,563 Likes (Superhero)]

Hey Rick.

 

Live snapping is for snapping the draggable's values to particular sets (or increments) that you declare. What it sounds like you want in this case is minimum values. But you aren't really wanting minimum values for the draggable object itself, you're wanting minimum values in the world space. One way to do that is to that is to use a proxy and update the position and dimensions of your elements in the onDrag. I did that here: https://codesandbox.io/s/window-resizable-zfymg?file=/src/index.js

 

I'm sure @OSUblake, @GreenSock, or someone else will come by and show a better method of doing the same thing  

[OSUblake 13,962 Likes (Superhero)]

Only thing I can add is to stop using variables with hooks. This will only create problems later on. You need to use refs.

let draggableObj = [];
let draggableHandle = [];

 

And calling new Draggable doesn't not create an array.

// INCORRECT
new Draggable(windowHandle_ref.current, {

})[0];

// BETTER
new Draggable(windowHandle_ref.current, {

});

 

[Rick May 18 Likes (Newbie)]

1 hour ago, OSUblake said:

Only thing I can add is to stop using variables with hooks. This will only create problems later on. You need to use refs.

let draggableObj = [];
let draggableHandle = [];

 

And calling new Draggable doesn't not create an array.

// INCORRECT
new Draggable(windowHandle_ref.current, {

})[0];

// BETTER
new Draggable(windowHandle_ref.current, {

});

 

 

Yeah,  this is left over from a couple of months ago before I was  using refs.   The arrays are from making multiple windows that I deleted for this example.  

[Rick May 18 Likes (Newbie)]

1 hour ago, ZachSaucier said:

Hey Rick.

 

Live snapping is for snapping the draggable's values to particular sets (or increments) that you declare. What it sounds like you want in this case is minimum values. But you aren't really wanting minimum values for the draggable object itself, you're wanting minimum values in the world space. One way to do that is to that is to use a proxy and update the position and dimensions of your elements in the onDrag. I did that here: https://codesandbox.io/s/window-resizable-zfymg?file=/src/index.js

 

I'm sure @OSUblake, @GreenSock, or someone else will come by and show a better method of doing the same thing  

 

Thanks much.  That makes sense.