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

时间:2012-12-20 18:57:36

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

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

水平排序可以在重新排列项目时水平滚动。 但是,如果我从垂直方向拖动到水平方向,它将不会像我进行纯粹排序时那样滚动水平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;
        }
    });

1 个答案:

答案 0 :(得分:1)

这是因为当你使用追加到身体时,帮助者成为身体的一部分,因此不会滚动水平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