jQueryUI可排序和可拖动的目标不会水平滚动进行拖放，但会进行排序 [英] jQueryUI sortable and draggable target won't scroll horizontally for drop but will for sort

问题描述

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

I have two divs that contain multiple divs and can scroll. I have a vertical div that has the draggable on the contained divs. My horizontal div is sortable and I connect the draggable to it via the connectToSortable.

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

The horizontal sortable can scroll horizontally when rearranging items. However if I drag from the vertical to the horizontal it will not scroll the horizontal div like when I do a pure sort.

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

I have already read all the entries here for scrolling a div with plugins like scrollTo and derivatives and they do not help with my particular issue. I am using jQuery 1.8.3 and jQuery UI 1.9.2

我可以进入视口，但是我希望用户能够像排序时一样拖动并进行水平滚动.如果我将其放入可见区域然后进行排序，则会滚动div.

I can drop into the viewport but I want my users to be able to drag and have the horizontal scroll work as it does when just sorting. If I drop in the visible area and then sort it will scroll the 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时，辅助对象成为主体的一部分，因此不会滚动水平div.

It is because when you use append to body, the helper becomes the part of the body and hence will not scroll the horizontal div.

我也正在实现此功能，并感谢 sdespont

I too was implementing this functionality, and found a workaround thanks to 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 makes the helper part of the your horizontal div first and then appends it to the body.

希望这会有所帮助.

您还可以参考此

这篇关于jQueryUI可排序和可拖动的目标不会水平滚动进行拖放，但会进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！