Jump to content
Search Community

liveSnap

swampthang test
Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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

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

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.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
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...