jquery - Allowing draggable to move only in 20px squares -

Actually, I have two containers, whose backdrop repeats box is 20x20 pixels. I combine draggables with only 20x20 squares I want to be able to be able to. I've got a solution that suits, but for some reason the rest of the code does not work.

Even what I have tried is:

  drag: function (event, UI) {var snapTolerance = $ (this). Draggable ('option', 'snapTolerance'); Var topremander = ui.position.top% 20; Var leftRemainder = ui.position.left% 20; If (topremander = lenghtlerance) {ui.position.top = ui.position.top - topRemainder; } If (left rider & lt; = snaptlerance) {ui.position.left = ui.position.left - leftRemainder; }}  

The problem is that I do not want to touch some boxes when dropped in some containers. For which I use the following function

 for  (var i = 1; i & lt; = 15; i ++) {$ ('# box-' + i). Droppable ({greedy: true, tolerance: 'touch', drop: function (event, UI) {ui.draggable.draggable ('option', 'back',);}}}  

}

Both work individually, they do not just sit together: D. An example of what sometimes happens:

[sry , Images can not be posted: ()

Another mess is that sometimes the inside of the container The box returns here too,

The question is:

So the question is, there is no other way to move the box only at the feet of 20px so that they always contain the container Can not combine with classes, who do not bug this way?

EDIT: I came to the conclusion that snapolorescence somehow moves objects and tricks of the check cursor object.

It is in the doctor!

$ ("#draggable ") .dragable ({grid: [20, 2 0]});