Rick May Posted April 29, 2020 Share Posted April 29, 2020 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 More sharing options...
ZachSaucier Posted April 29, 2020 Share Posted April 29, 2020 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 1 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 29, 2020 Share Posted April 29, 2020 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, { }); 2 Link to comment Share on other sites More sharing options...
Rick May Posted April 29, 2020 Author Share Posted April 29, 2020 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 More sharing options...
Rick May Posted April 29, 2020 Author Share Posted April 29, 2020 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now