带有溢出启用容器内的链接列表的 Jquery 可排序答案

【问题标题】：Jquery Sortable with linked lists inside overflow enabled container带有溢出启用容器内的链接列表的 Jquery 可排序
【发布时间】：2012-08-27 15:03:20
【问题描述】：

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

有谁知道如何将滚动或拖动事件附加到容器上？我尝试在容器上设置可排序并制作子句柄，但这不会触发我需要的“接收”事件。加上滚动事件仍然无法正常工作。

这是我的插件的初始化方式：

$('.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 网站上查看此示例：jqueryui.com/demos/sortable/#delay-start，您似乎无法拖动滚动区域。
好吧，这看起来很公平，但是为什么当我在容器上启用插件并且只将项目设置为可排序目标时，滚动仍然不起作用？根据我对插件的理解，应该...
嗯所以你的意思是当可排序元素导致容器滚动时你甚至不能滚动？我的意思是，我认为拖动滚动容器会得到支持，但我想不会……
是的，我也是。从文档来看，它应该可以工作，但由于某种原因，它只是移动页面而不是滚动 div...

标签： javascript jquery html css jquery-ui-sortable

【解决方案1】：

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

希望这将很快被添加...

【讨论】：