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

标签 jquery jquery-ui scroll draggable jquery-ui-sortable

我有两个 div,其中包含多个 div 并且可以滚动。 我有一个垂直 div,其所包含的 div 上可拖动。 我的水平 div 是可排序的,我通过 connectToSortable 将可拖动元素连接到它。

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

我已经阅读了这里关于使用诸如scrollTo和衍生工具之类的插件滚动div的所有条目,它们对解决我的特定问题没有帮助。我正在使用 jQuery 1.8.3 和 jQuery UI 1.9.2

我可以放入视口(viewport),但我希望我的用户能够拖动并让水平滚动像排序时一样工作。如果我放入可见区域然后排序,它将滚动 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;
        }
    });

最佳答案

这是因为当你使用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

关于jQueryUI 可排序和可拖动目标不会水平滚动以进行放置,但会进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13978686/

相关文章:

javascript - 想要滚动 DIV 元素,而不是整个网页

html - 如何自定义滚动导航栏?

jquery - 如何解决非渲染DataTable 导出按钮?

javascript - jquery 在满足两个条件时执行函数

javascript - 执行 jquery 插件?

jquery - ui.item.has() 总是被触发

javascript - beforeShowDay 方法如何工作? (Jquery UI 日期选择器)

jQuery Slider 不拾取换行符上的元素

asp.net-mvc - 在 jQuery UI 对话框中显示 MVC3 Unobtrusive ValidationSummary 错误

javascript - jquery - 如何使窗口区域滚动和 iframe 也同时滚动?