Javascript 支持溢出的容器中具有链接列表的Jquery可排序

Javascript 支持溢出的容器中具有链接列表的Jquery可排序,javascript,jquery,html,css,jquery-ui-sortable,Javascript,Jquery,Html,Css,Jquery Ui Sortable,好的,我对Jquery可排序插件有一个奇怪的问题。我试图在overflow-y:autodiv中创建一系列列表。当列表比容器小时,这非常有效。但是,一旦列表增长并且容器溢出起作用,排序表就不再真正起作用。当用户拖动列表时,它们不会向下滚动 有人知道如何将滚动或拖动事件附加到容器上吗?我尝试在容器上设置sortable并生成子句柄,但这不会触发我需要的“receive”事件。此外,滚动事件仍然无法正常工作 下面是如何初始化我的插件: $('.sort-list').sortable({

好的,我对Jquery可排序插件有一个奇怪的问题。我试图在
overflow-y:auto
div中创建一系列列表。当列表比容器小时,这非常有效。但是,一旦列表增长并且容器溢出起作用,排序表就不再真正起作用。当用户拖动列表时,它们不会向下滚动

有人知道如何将滚动或拖动事件附加到容器上吗?我尝试在容器上设置sortable并生成子句柄,但这不会触发我需要的“receive”事件。此外,滚动事件仍然无法正常工作

下面是如何初始化我的插件:

$('.sort-list').sortable({
        'connectWith': '.item-container',
        'items': ".item-wrapper:not(.main-item)",
        'containment': '.canvas',
        'placeholder' : "ui-state-highlight",
        'scroll' : true,
        'opacity' : 0.8,
        start: function (event, div) { 
            // set the placeholder size to the proper size
            $('.ui-state-highlight').css({
                'width':$(div.helper).outerWidth()-2,
                'height':$(div.helper).outerHeight()-2
            });             
        },
        receive: function(event, ui) {
            var interval = $(event.target).parent('.time-container').attr('interval');
            var oldInterval  = $(ui.sender).parent('.time-container').attr('interval');
            var item = $(ui.item).find('.item').data('objectData');
            self.updateInterval(oldInterval, interval, item);         
        }
    });

有没有人能洞察这种行为的运作?我真的被难住了。。。谢谢。

所以,我回答这个问题是为了所有正在寻找解决方案的人。不幸的是,对于当前的Jquery UI sortable,这是不可能的。我最终创建了一个不同的行为,它不依赖于可排序的滚动列表。它基本上涉及到引用右侧的每个列表,并将列表中的项目拖动到该列表以更改它们所在的列表。希望这能帮到别人。:/


希望这将很快被添加…

我不确定这是否可能-如果你看看jQuery UI网站上的这个例子:,你似乎无法拖动滚动区域。好吧,这看起来很公平,但是为什么当我在容器上启用插件并且只将项目设置为可排序的目标时,滚动仍然不起作用?从我对插件的理解来看,这应该……嗯,你的意思是当可排序元素导致容器滚动时,你甚至不能滚动?我的意思是,我认为通过滚动容器拖动是受支持的,但我想不是…是的,我也是。从文档来看,它应该可以工作,但由于某些原因,它只是移动页面,而不是滚动div。。。