jQueryUI 可排序和可拖动目标不会水平滚动以进行放置，但会进行排序

Posted 2023-05-08

【中文标题】jQueryUI 可排序和可拖动目标不会水平滚动以进行放置，但会进行排序

【英文标题】：jQueryUI sortable and draggable target won't scroll horizontally for drop but will for sort

【发布时间】：2012-12-08 08:35:06

【问题描述】：

我有两个包含多个 div 并且可以滚动的 div。 我有一个垂直 div，它在包含的 div 上有可拖动的。 我的水平 div 是可排序的，我通过 connectToSortable 将可拖动对象连接到它。

水平排序可以在重新排列项目时水平滚动。 但是，如果我从垂直拖动到水平，它不会像我进行纯排序时那样滚动水平 div。

我已经阅读了此处的所有条目，用于使用 scrollTo 和衍生工具等插件滚动 div，但它们对我的特定问题没有帮助。我正在使用 jQuery 1.8.3 和 jQuery UI 1.9.2

我可以拖放到视口中，但我希望我的用户能够像在排序时那样拖动并让水平滚动工作。如果我放到可见区域然后排序，它将滚动 div。

谢谢！

$(".playboxresults, .playboxrecommended").draggable(
        revert: "invalid",
        opacity: 0.95,
        containment: 'document',
        connectToSortable: "#divCurrentList",
        helper: function () 
            $copy = $(this).clone();
            return $copy;
        ,
        appendTo: 'body',
        scroll: true,
        start: function (e, ui) 
            draggedItem = ui.item;
        
    );

【问题讨论】：

我们可以看看你的代码吗？你在使用 'appendTo: body' 吗？

我实际上是在使用 appendTo: body。我用代码更新了帖子。

re: appendTo: body - 我的放置目标是水平 div。这个 div 具有固定的定位，并且是液体布局的一部分，永远不会低于折叠。如果我记得在添加 appendTo 之前有很多问题，所以我 99% 确定我不能删除这个属性。

【参考方案1】：

这是因为当你使用 append to body 时，helper 成为 body 的一部分，因此不会滚动水平 div。

我也在实现这个功能，并通过sdespont找到了解决方法

helper: function()
     $('#horizontalDiv').append('<div id="clone">' + $(this).html() + '</div>');
     $("#clone").hide();
     setTimeout(function()
         $('#clone').appendTo('body');
         $("#clone").show();
     ,1);
     return $("#clone");
,

这首先使你的水平 div 的助手部分，然后将其附加到正文。

希望这会有所帮助。

您也可以参考this

【讨论】：

感谢您回到 Mandeep。稍后我将能够对此进行测试，并且一定会告诉您结果。再次感谢。

抱歉回复晚了。很忙。

我尝试了解决方案。它没有破坏放置行为，但也没有启用滚动。我的页面的代码很复杂，因此可能存在其他问题阻止滚动时拖动。我通过调整您提出的答案尝试了我能想到的一切，但不幸的是没有成功。还是谢谢！

如果你能把你的代码放在一个 jsfiddle 中，我可能会提供帮助

我很感激这个提议。我需要几天的时间才能尝试。我会尽量在星期天做，因为我可以使用很多帮助。谢谢！