Draggable Snap to Grid Based on Another Object

[Guest GRDC]

I have two objects on the screen.  I've had success in snapping to a grid based on the draggable element.  Is snapping to a grid based on another element (or given coordinates) possible with GSAP api?  Would rounding and setting the dom element's position programatically in the drag() function be an acceptable workaround?

[Diaco]

Hi reanimator 

 

if i understood correctly , you can set draggables snap with something like with this : 

draggable[0].vars.snap={ x:box2.left ,  y:box2.top }

maybe this can help you : 

See the Pen BygQNB by MAW (@MAW) on CodePen

[OSUblake]

Like Diaco just showed, you can snap to whatever you want. Just feed it a number.

 

You can also create a snap effect in your drag function. Doing this will give you more flexibility as you can do things like add an animation to the movement.

 

See the Pen b46392f9d230db0521502815ae836106 by osublake (@osublake) on CodePen

[Guest GRDC]

Thanks for the replies.  I'm using top, left by percentages to store the object's position.  Blake, would you demonstrate a fork in your grid layout with top/left as percentages of their parent?  I'm having trouble getting it to work.

[OSUblake]

I'm having trouble figuring out what you're trying to do.

 

Are you talking about making the grid percentage based, and you're having trouble snapping to a percentage?

 

And by object's position, do mean you are storing the draggable's position as a percentage, the grid's position, the grid cells, or everything? 

 

If you could clarify or show me your problem, then I'll be able to help you out.

[Guest GRDC]

The dragged object's top/left are stored as percentages (due to resizing of container that happens regularly).  There is one object on the screen that is, in essence, the origin for snapping.  It can reside at any arbitrary location within the container.  I wish to snap to percentage intervals (say every 2%) based on the object that is considered the "origin" within that same container.

[OSUblake]

Good timing. I was just doing something similar to that. Standy by...

[Diaco]

Hi again

 

i know Black'ill come back with great example/code , but i think this worth to check : 

See the Pen OPWLOx by MAW (@MAW) on CodePen

[Guest GRDC]

Thanks for the replies guys.  Diaco, I forked your pen, and monkeyed for a while.  I'm struggling with programatically setting the top/left percentages during drag.  Is this type of thing possible?

 

In the pen, what I'd like to accomplish is that the green knob snaps to the red knob (origin), regardless of where that knob is on the screen.  I'd ideally like to set the object's percentages during drag so as to be able to reference them via means other than the transform.

 

See the Pen xbvxbM?editors=001 by anon (@anon) on CodePen

 

Another idea I toyed with is using the snap function to get the coordinates of the origin object, and using a modulus to snap to a grid based on the those values.  This may be enough, as I don't need to do anything fancy in the onDrag method.

 

Any thoughts?

[OSUblake]

Hi reanimator

 

I created a demo that does this, but I got called out of town before I got a chance to upload it. I'll put it up on CodePen when I get back later tonight.

[OSUblake]

Sorry for the delay.

 

I've been dealing with responsive draggables for quite some time now, and my current approach is to just covert it's position to a percentage when you're done dragging. If you want to snap to a percentage, just convert it to a px value, and snap to that value. When you're done dragging, convert it back to a percentage, and you're good to go.

 

In my demo, I calculate the snap during onDrag, both in percent and px values. I then store the percent value, and set the draggable to a px value. It will only snap while it's over the grid, so if I don't have a stored snap value, I just manually calculate it's position when setting it relative.

 

Since my demo is based on a grid, I automatically adjust the snap values when you change them so that they will be evenly spaced. So if you enter 32 for snapX, it will change it to 33.333... If you were going after this behavior, you can check out how to calculate it in the marker's snapX/Y getter.

 

See the Pen WbVRrj by osublake (@osublake) on CodePen

[Guest GRDC]

My draggable object always starts with this.x and this.y at zero.  So, the second that I drag to the left or top, the x,y values become negative.  I noticed that yours does not behave in this way.  Is there something in your code that makes the draggable instance begin at this.x,this.y coordinates relative to their container, and not themselves?

[Diaco]

How about this : 

See the Pen OPWLOx by MAW (@MAW) on CodePen

[Guest GRDC]

I'd like the green box to snap to the red box  (at percent intervals based on the red box) during drag.

 

In my efforts to set the green box's position during drag (either to pixels or percent), once I drag, it goes nuts and drags far beyond the cursor.  I'm using object.position() to get the coordinates for snapping in these cases, which have proven unsuccessful.

 

I'm guessing that my this.x and this.y values are negative due to absolute positioning, and clearProps after each dragEnd.

 

What I may resort to: (pseudo)

 

before drag:  see how far the dragged object is from the origin object.

snap:  snap to the modulus of the draggable object vs origin object

 

Thus far, I have not been successful at calculating the dragged object's current position and (re)setting its coordinates.

[Guest GRDC]

Diaco, thanks for the help on this.  I think I'm really close (at least to understanding).

 

When I change the css of the origin to 49%, the snapping is off.  Is it possible to calculate the snapping during (or on start of) drag, and respond to those values dynamically?

 

One scenario that might arise is if the user elects to change the position of the origin (which is possible in my application through a drag on the red box).

[OSUblake]

My example snaps to dynamic values. That was the main reason I made into a dynamic grid. And it does go negative as soon as you move it left or up. Just look at the element in your console. What part are you having trouble understanding?

[Guest GRDC]

I guess what I was toying with was calculating and resetting the top/left values of the two objects "during" drag.  Doing so resulted in the top left values becoming increasingly large, and not staying with the cursor.

 

What I've opted to do is calculate the modulus (based on the fake origin) to which the object must snap prior to the draggable's creation, and change that value when the window resizes.  Due to time constraints, this will have to suffice for now.

[Sahil]

@brentbuck1 Please post your question in the forums as new question to get the answer. If you want to save any older threads, just mark them as favorite so you can view them from your profile instead of posting same question on every old post.

[Sahil]

You can instead create your own question and refer this thread in it. I noticed 4 posts from you with similar question being posted on all old posts.

 

Blake will reply you whenever he gets online and notices your question. So please just create your own thread.