jQueryUI sortable and draggable target won't scroll horizontally for drop but will for sort

问题

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.

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.

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

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.

Thanks!

$(".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:

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.

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");
},

This makes the helper part of the your horizontal div first and then appends it to the body.

Hope this helps.

You may also refer to this

来源：https://stackoverflow.com/questions/13978686/jqueryui-sortable-and-draggable-target-wont-scroll-horizontally-for-drop-but-wi

标签

jquery