当它超过某个div时,如何更改可拖动元素的网格?

时间:2013-04-21 08:17:46

标签: jquery jquery-ui jquery-ui-draggable

所以我正在制作一些东西......到目前为止这是我的代码

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

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

1 个答案:

答案 0 :(得分:0)

我明白了。但是,如果有人有更好的解决方案,请告诉我,因为我不太了解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();
                    }
                });
            }
        }
    })
}