Jquery UI Draggable Snapping with margin

Question

I'm working on a project where users can customize their own dashboard page. This means they can drag components onto the page and position them as they like.

To get a nicely layout page I want the components to snap to each other. At this moment I'm using the snap: true property, which will place the components right next to each other. However, I'd like to have some space in between the components after they snapped. So instead of snapping to the exact position of the other component, it must snap to the other component with a 5 pixel gap.

Is there any way to do this?

Answer 1

A few options to think about:

• Wrap each component in an enclosing element (e.g. div) with a padding of 2.5 pixels and a transparent background and make these enclosing elements the draggable ones. Thus when the enclosing elements snap together, your current elements will appear to have snapped together but with a 5 pixel gap to each other

• Subscribe to the 'stop' event on the draggable items and use it to manually reposition them to a 5 pixel gap after the snapping has finished

• Set up 'droppable' elements to accept the 'draggable' components, laying them out to ensure that a 5 pixel gap is retained between each