jQuery UI Draggable, Snapping to a Grid

Question

I have two containers. A thumbnail container, and a \"page\" container. Both are divs. Thumbnails can be dragged back and forth between the two containers. I have revert on the

Answer 1

Check the snapping example on the Jquery UI Site:

http://jqueryui.com/demos/draggable/#snap-to

You can take their same example and specify both a grid and a snap parameter.

Then the snap will be based off of the top left corner of the snap selector.

$( "#draggable5" ).draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] });

The example on the Jquery site will now let the "80x80" box snap based on the big container.

In your situation it might be easiest to create a div with 100% width and height, then set the snap: selector (using css selectors) to that div, then specifying a grid to snap to...

Good Luck