Jquery 当可拖动元素经过某个div时，如何更改其网格？

所以我正在做一些事情…这是我目前的代码

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

---

当元素被拖动到某个div的顶部时，我希望它将网格更改为[1,1]。因此，它在这个div上是平滑的，但只在[20,20]网格上的其他地方移动。这可能吗？

我想出来了。但请告诉我是否有更好的解决方案，因为我不太了解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();
                    }
                });
            }
        }
    })
}

函数makeDraggable（）
{
$（'.draggableThing'）.draggable({
网格：[20,20]，
拖动：函数（）{
如果(
$（this）.position（）.top>$（'.theDivToDragOn'）.position（）.top
&&$（this.position（）.top$（'.theDivToDragOn'）.position（）.left
&&$（此）.position（）左