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 thumbnails set to 'invalid', so they snap back to one of the two containers if they are dropped outside of either one of them.
The thumbnails must snap to a 20x20 grid inside the "page" container. This is so client the client can put the thumbnails in the "page" container in any place, but still be able to line them up neatly.
The problem is the draggable 'grid' option doesn't seem to work too well for this. It seems the "grid" is determined by the draggables location when you start dragging it, rather than acting as if the page has a real grid that can be snapped to.
Is there a way to fix this so the grid is based off the "page" container, rather than the position of the draggable when you start dragging it? I'm still interested to find if you found a solution for this. I've tried the 1 answer below, but it did not solve my problem. My problem is that each element seems to have it's own grid based on where it is dropped.
以上就是jQuery UI Draggable, Snapping to a Grid的详细内容，更多请关注web前端其它相关文章！