Question

所以我要做的就是创建一个类似于将iPad / iPhone上的app和app图标拖动到屏幕的另一部分时的效果。

因此，使用jQuerys UI可排序有一种方法可以检测被拖动的项目是在外面/接触容器的边缘，然后滚动到下一个屏幕。（我目前正在使用滚动部分的jQuery循环插件）。

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

以下链接是我目前所拥有的

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

非常感谢任何帮助！

非常感谢

Answer 1

你可以触发，例如开始时滚动绑定事件：

一个虚拟的例子：

$("#areaOne, #areaTwo").sortable({
    connectWith: ".connectedSortable",
    start: function(ui, e){
        $(this).bind('mouseleave', function(){
            $('#next2').trigger('click');
        });
    },
    stop: function(){
        $(this).unbind('mouseleave');
    }

}).disableSelection();

您会注意到仍然存在一些定位问题，这些问题将不会实际丢弃任何东西，但您可以通过摆脱循环插件并为滑块滚动自己的解决方案来绕过它们。或者修改你拥有的东西。希望这至少可以让你开始。

Answer 2

这里你去：

$(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;
    });

});

小提琴：http://jsfiddle.net/maniator/Az5kw/

检测jQuery UI可排序项是否正在触及/在其容器外部

2 个答案: