Snap to grid

A very useful functionality for the user is, if they can snap items of the diagram to a grid, as it makes the alignment much more comfortable. Fortunatly jsPlumb already provides already a function to do so.

Let’s create the grid

There are several ways to create one, but by far the most simple is to create a little grid-image and repeat it on the background of a div. We’ll use the following. Please feel free to copy and use it in your project!

grid

To repeat it, we’ll use the following code

<div style"
	height:80px;width:200px;
	background-image: url(grid.png);
	background-repeat:repeat;">
</div>

Looks nice, doesn’t it?

Snap the item to the grid

As I said, jsPlumb is already there to do the grid-snapping magic for us. We simply need to pass an object with a grid-property to the jsPlumb.draggable-method.

Example

jsPlumb.draggable("item_right", { grid:[10,10] });

Play with example »

Quite simply, huh? :-)