Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

liveSnap

Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

 

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

×