jquery - 当可拖动元素越过某个 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();
                    }
                });
            }
        }
    })
}