swampthang Posted July 30, 2020 Share Posted July 30, 2020 I'm attempting to set up a simple Draggable with liveSnap. Want any of the green blocks to snap to either the left or right of the other 2 but none of the blocks are draggable. What am I doing wrong here? (I'm sorry about still using 2.x but I can't upgrade yet) See the Pen wvMLybj by swampthang (@swampthang) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 30, 2020 Share Posted July 30, 2020 Hey swampthang. Sorry, what's the goal? And what's wrong about the pen that you provided? It's not clear to me at this point. 1 hour ago, swampthang said: none of the blocks are draggable This is confusing to me because all three of the green blocks are draggable... 1 Link to comment Share on other sites More sharing options...
swampthang Posted July 30, 2020 Author Share Posted July 30, 2020 33 minutes ago, ZachSaucier said: This is confusing to me because all three of the green blocks are draggable... In Chrome, none of the blocks are draggable left/right. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 30, 2020 Share Posted July 30, 2020 In no browser are they able to be dragged left or right. But what's the goal? To have them only be able to move along the x axis but not go past the other green blocks? To move in the x and y axis but not go past the other green blocks? To be able to be in front or behind other green blocks so long as there's no overlap? Something else? Link to comment Share on other sites More sharing options...
swampthang Posted July 30, 2020 Author Share Posted July 30, 2020 43 minutes ago, ZachSaucier said: what's the goal? Ok, I'm an idiot. I need to be able to drag any of the 3 blocks to the left or right and snap them to the edges of the other 2 blocks but only when they get within a few pixels of the other blocks. I created another version of it where I'm setting liveSnap to an array. Is there a way to return an array AND use a radius value? Ok, now I'm seeing that using an array is a 1-time setup. So, once you've dragged one of the blocks, snap is still using the old array. Here's the other pen: See the Pen XWXLEvR by swampthang (@swampthang) on CodePen Link to comment Share on other sites More sharing options...
swampthang Posted July 30, 2020 Author Share Posted July 30, 2020 I think I finally figure it out. Here's codepen 3: See the Pen pogXKGq?editors=1010 by swampthang (@swampthang) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 30, 2020 Share Posted July 30, 2020 Edit: It looks like you posted as I was posting this. Here's my answer anyway I see. I'd approach this situation differently. Right now you're trying to compute the positions which requires a fair amount of computation (and using left is not optimal), especially as the elements move around. Instead, I'd create a simple data representation of the elements and use that. Something like this: See the Pen rNxErrL?editors=0010 by GreenSock (@GreenSock) on CodePen The above pen doesn't actually do any snapping, just limits the positions where it can be dragged. You could add snapping to it but you weren't clear on how you'd like it to snap (what radius to use, what to do when there's two possible options to snap to). Calculating the distance inside of the blockData.forEach function should get you all the data you need to snap though. 1 Link to comment Share on other sites More sharing options...
swampthang Posted July 30, 2020 Author Share Posted July 30, 2020 Thanks, @ZachSaucier. My problem was that I didn't understand all the in's and out's of liveSnap. Your point is well taken regarding using type: 'x' rather than type: 'left' Below is what I ended up with. It works the way I was wanting it to. And sorry for not being more clear. I wanted either end of a block to snap to either end of the other 2 allowing you to move them around which would change the snap points. See the Pen zYrVLao?editors=1010 by swampthang (@swampthang) on CodePen 1 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