javascript - 检测 jQuery UI 可排序项目是否接触/超出其容器

Question

所以我想做的是创建一种类似于将 iPad/iPhone 上的应用程序图标拖到屏幕的另一部分时的效果。

所以使用 jQuerys UI sortable 有一种方法可以检测被拖动的项目是否在容器的外部/接触到容器的边缘，然后滚动到下一个屏幕。 (我目前在滚动部分使用 jQuery 循环插件)。

这是获得此类功能的最佳方式还是有其他更好的方式？

下面是我目前的链接

http://jsfiddle.net/7fPe6/1/

非常感谢任何帮助!

非常感谢

Answer 1

给你:

$(function() {
    $(".block").draggable({ 
        drag: function(event, ui) {
            if(ui.offset.left > $(this).parent().width() 
               && $(this).parent().get(0).id == 'areaOne'){
                //console.log('out of bounds');
                $('#next2').trigger('click');
                var next = $(this).parent().next();
                $(this).appendTo(next);
                $(this).css({
                    left: ui.position.left,
                    top: ui.position.top
                })

            } 
            else if(ui.offset.left < 0 - $(this).width()
               && $(this).parent().get(0).id == 'areaTwo'){
               // console.log('out of bounds');
                $('#prev2').trigger('click');
                var next = $(this).parent().prev();
                $(this).appendTo(next);
                $(this).css({
                    left: ui.position.left,
                    top: ui.position.top
                })

            } 
        }
    });

    $('#appContentHold').cycle({
        fx: 'scrollHorz',
        timeout: 0,
        next: '#next2',
        prev: '#prev2',
        nowrap: 1

    });

    $('#goto2').click(function() {
        $('#appContentHold').cycle(1);
        return false;
    });

});

fiddle :http://jsfiddle.net/maniator/Az5kw/