Droppable tolerance touch problem

Droppable tolerance touch problem

I didn't know how to formulate the question, so suggestions about the name of the question is advised :D.

So basically I have a grid(the main droppable container), consisting from elements 20x20px and in order to snap the draggable in the conrainer according to this 20x20 elements I need to use the SnapTolerance to correct their positioning inside the grid. 

  1. for(var i=1; i<=15; i++){ 
  2.       $('#box-' + i).draggable({ 
  3.             revert: "invalid", 
  4.             stop: function(){
  5.                   $(this).draggable('option', 'revert', 'invalid');       
  6.             }, 
  7.             drag: function( event, ui ) { 
  8.                   var snapTolerance = $(this).draggable('option', 'snapTolerance'); 
  9.                   var topRemainder = ui.position.top % 20; 
  10.                   var leftRemainder =ui.position.left % 20; 
  11.                   if (topRemainder <= snapTolerance) { 
  12.                         ui.position.top = ui.position.top - topRemainder; 
  13.                   } 
  14.                   if (leftRemainder <= snapTolerance) { 
  15.                         ui.position.left = ui.position.left - leftRemainder; 
  16.                   } 
  17.             } 
  18.       }); 
  19. };


This works just fine, but on the other hand I don't want the draggables to overlap, so I use them also as droppable with a variable set to invalid, if they overlap.


  1. $('#box-' + i).droppable({ 
  2.       greedy: true, 
  3.       tolerance: 'touch', 
  4.       drop: function(event,ui){ 
  5.             ui.draggable.draggable('option','revert',true); 
  6.       } 
  7. })

So far so good, it all works fine for me, but sometimes the SnapTolerance is playing a joke with me and allows something like this.


Which I of course don't want to happen. And till we're still on this subject, I also don't know how to avoid another nasty "bug". When a draggable is dragged to the edge of the container it doesn't isntantly take position. Sometimes it returns (as invalid) up to 10 times, and I have to be really insistent about it.

Here is the jsfiddle for the whole thing.


http://jsfiddle.net/rb4qeq8k/1/


You can play around with it for a little while to see where it "bugs".

Thanks in advance.