如何更改可拖動元素的網格，當它超過某個div時？

Question

所以我在做什麼......這是我到目前爲止的代碼

$('.draggableThing').draggable({grid:[20,20]}); 

當元素被拖動某個DIV的頂部，我希望它改變網格爲[1,1]。所以在這個div上它是平滑的，但只能在其他地方的[20,20]網格上移動。這可能嗎？

Answer 1

我想通了。但讓我知道是否有人有更好的解決方案，因爲我不太瞭解JQuery的工作原理。

function makeDraggable() 
{ 
    $('.draggableThing').draggable({ 
     grid:[20,20], 
     drag:function(){ 
      if (
       $(this).position().top>$('.theDivToDragOn').position().top 
       &&$(this).position().top<$(".theDivToDragOn").position().top+$(".theDivToDragOn").innerHeight() 
       &&$(this).position().left>$('.theDivToDragOn').position().left 
       &&$(this).position().left<$(".theDivToDragOn").position().left+$(".theDivToDragOn").innerWidth() 
      ){ 
       $(this).toggleClass('draggableThing').toggleClass('smoothDraggable'); 
       $('.smoothDraggable').draggable({ 
        grid:[1,1], 
        drag:function(){ 
         if (
          $(this).position().top<$('.theDivToDragOn').position().top 
          ||$(this).position().top>$(".theDivToDragOn").position().top+$(".theDivToDragOn").innerHeight() 
          ||$(this).position().left<$('.theDivToDragOn').position().left 
          ||$(this).position().left>$(".theDivToDragOn").position().left+$(".theDivToDragOn").innerWidth() 
         ){ 
         $(this).toggleClass('draggableThing').toggleClass('smoothDraggable'); 
         makeDraggable(); 
        } 
       }); 
      } 
     } 
    }) 
}