Draggable with swap and snap to custom grid

[_Greg _]

Hi!

I check documentation and can't understand how to snap to custom/responsive grid?

And second question, i try to create swap like 

See the Pen ONGprv?editors=1010 by GreenSock (@GreenSock) on CodePen

 but its not working

See the Pen bGByWvV?editors=0011 by gregOnCodePen (@gregOnCodePen) on CodePen

[ZachSaucier]

Hey Greg (Nekiy ).

 

You don't really need the Draggable's snapping functionality if you're wanting to swap places, though you could build it with it if you want to. One of the key things your demo is missing is that you're positioning the content with CSS alone (flexbox) whereas the original demo is using absolute positioning and placing things with transforms. Both could work and have tradeoffs. If you do it your way, every time you need to measure the positions there's a slight performance hit. If you do it with transforms, it's slightly harder to make responsive. 

 

There are a lot of ways to do this sort of thing depending on your exact needs. In general terms, you need to keep track of where an element was, where it should end up, animate both the element and the other(s) based on where the element gets dropped, and optionally change the other elements based on where the element being dragged currently is.

 

Before I race ahead building something for you, what's your end goal? 

• If an element is dropped, should the two items switch? Or should all of the elements "shift" to make room? Should the elements move as the element is being dragged or only at the end?
• How should this be responsive? Keeping the gaps between the same? Scaling everything inside of it? Scaling the background rect but not the content? Keeping the size the exact same but wrapping the squares as necessary?
• What browsers do you need to support?

[_Greg _]

Thank you, @ZachSaucier

I try to create something like Swappable 

After you drag and drop only two blocks chage position, but i don't realy sure that this is good realization with flexbox. i try something like:

snap: {
	x: [0, blockWidth + gap.width, blockWidth * 2 + gap.width * 2]
  	y: [0, blockHeight + gap.height, blockHeight * 2 + gap.height * 2]
}

i understand how to get blockWidth/blockHeight, but not sure how to get gap.height/gap.width in flexbox or grid layout (and need to update variables each time on window resize)

 

How can i `keep track of where an element was` ?  Maybe better create container for each elements and use Flip helper function to swap elements?

 

[ZachSaucier]

44 minutes ago, _Greg _ said:

I try to create something like Swappable 

If I were creating something like that, I'd approach it very differently than how you're approaching it. I'd only have one Draggable element that is placed on top of your other content starts being "dragged". Then, while dragging, if its hit test is above your threshold, you switch out the text of the relevant elements. When the mouse is released and it should swap, animate it to the position on the screen of the target box (you could use the Flip plugin but could also do it by hand) and do whatever else you need it to do.