允許拖動只能在20px的方塊中移動

基本上我有兩個容器，其背景是一個重複框20x20像素。我想讓拖動器只有在與這些20x20方格對齊的情況下才能移動。我發現了一個適合的解決方案，但由於某種原因，並沒有完全解決代碼的其餘部分。允許拖動只能在20px的方塊中移動

這裏是我試過到目前爲止：

drag: function(event, ui) { 
      var snapTolerance = $(this).draggable('option', 'snapTolerance'); 
      var topRemainder = ui.position.top % 20; 
      var leftRemainder =ui.position.left % 20; 

      if (topRemainder <= snapTolerance) { 
       ui.position.top = ui.position.top - topRemainder; 
      } 

      if (leftRemainder <= snapTolerance) { 
       ui.position.left = ui.position.left - leftRemainder; 
      } 
     }

的問題是，我不希望裏面的一些容器跌落時的箱子觸摸。爲此我使用以下功能

for(var i=1; i<=15; i++){ 
$('#box-' + i).droppable({ 
    greedy: true, 
    tolerance: 'touch', 
    drop: function(event,ui){ 

     ui.draggable.draggable('option','revert',true); 

    } 

})

};

他們兩人都單獨工作，他們一起沒有：D。下面是有時會發生什麼一個例子：

http://i.stack.imgur.com/Yrbm7.jpg [SRY，不能發佈圖片:(]

另一個討厭的錯誤是，有時即使正確放置在容器內，箱子返回到其先前的位置，就好像是不允許有下降

這裏的小提琴：http://jsfiddle.net/rb4qeq8k/4/

所以現在的問題是，是否有框只有20個像素的步驟使移動任何其他方式讓他們總是與容器的正方形對齊，這不像這個錯誤？

編輯：我得出結論，snapTolerance以某種方式錯誤和檢查光標的移動不是對象的位置。

來源

2014-10-28 user4065758