Jump to content
Search Community

Help me understand livesnap on a draggable

Rick May test
Moderator Tag

Recommended Posts

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

 

 

Link to comment
Share on other sites

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 :) 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

});

 

  • Like 2
Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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.    :D

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.
×
×
  • Create New...