2

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;
        }
    });
Krafty
  • 602
  • 5
  • 24
  • can we see your code? Are you using 'appendTo: body' ? – Mandeep Jain Jan 25 '13 at 10:47
  • I am in fact using appendTo: body. I updated the post with code. – Krafty Jan 25 '13 at 15:17
  • re: appendTo: body - my target for the drop is a horizontal div. This div has fixed positioning and is part of a liquid layout that never goes below the fold. If I recall before adding appendTo there were tons of issues so I am 99% sure I cannot remove this attribute. – Krafty Jan 25 '13 at 18:26

1 Answers1

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

Community
  • 1
  • 1
Mandeep Jain
  • 2,304
  • 4
  • 22
  • 38
  • Thanks for getting back Mandeep. I will be able to test this a little later and I will be sure to let you know the results. Thanks again. – Krafty Jan 29 '13 at 11:24
  • Sorry for replying late. Was busy. – Mandeep Jain Jan 29 '13 at 12:33
  • I tried the solution. It did not break the drop behavior but it also did not enable scrolling. The code for my page is complicated so there might be other issues preventing the scroll from working when dragging. I tried everything I can think of by tweaking your proposed answer but unfortunately nothing succeeded. Thanks anyway! – Krafty Jan 29 '13 at 16:05
  • If u can put up your code in a jsfiddle i might be able to help – Mandeep Jain Jan 30 '13 at 05:30
  • I appreciate the offer. It will take me a few days before I can try. I will try to do it Sunday as I could use the help very much. Thanks! – Krafty Jan 30 '13 at 13:09
  • I am afraid I won't have time to set up the jsFiddle in the next few days and I don't want to waste your time. I will have to wait till my current deadline let's me come up for air. Thanks Mandeep! – Krafty Feb 02 '13 at 20:39
  • Thanks very much Mandeep. I have a deadline that will be over in about a week and then I can give this the attention it deserves. I really appreciate having another professional take a look at this bug that has eluded me for almost 6 weeks. I will post a fiddle as soon as I get a chance. – Krafty Feb 04 '13 at 09:37