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

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

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

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

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

非常感谢您的帮助

---

非常感谢

您可以在启动时触发滚动绑定事件：

一个虚构的例子：

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

}).disableSelection();

您会注意到，仍然存在一些定位问题，这些问题将阻止实际删除任何内容，但是您可以通过摆脱cycle插件并为滑块滚动您自己的解决方案来解决这些问题。或者修改你所拥有的。 希望这至少能让你开始

给你：

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

});

$（函数（）{
$（“.block”）.draggable（{
拖动：函数（事件、ui）{
如果（ui.offset.left>$（this.parent（）.width（））
&&$（this.parent（）.get（0.id==“areaOne”）{
//console.log（“越界”）；
$（'#next2'）。触发器（'click'）；
var next=$（this.parent（）.next（）；
$（此）.appendTo（下一个）；
$（this.css）({
左：ui.position.left，
top:ui.position.top
})
} 
else if（ui.offset.left<0-$（this）.width（）
&&$（this.parent（）.get（0.id=='Area2'）{
//console.log（“越界”）；
$（'#prev2'）。触发器（'click'）；
var next=$（this.parent（）.prev（）；
$（此）.appendTo（下一个）；
$（this.css）({
左：ui.position.left，
top:ui.position.top
})
} 
}
});
$（'#appContentHold'）。循环({
fx:‘滚动人’，
超时：0，
下一个：“#next2”，
上一页：“#上一页2”，
nowrap:1
});
$（'#goto2'）。单击（函数（）{
$（'appContentHold'）。循环（1）；
返回false；
});
});

小提琴：