How can I have an element with "overflow-y: auto" but still allow the browser to scroll when i drag an item horizontally using jquery ui sortable?

Question

I have a webpage that uses jquery ui sortable. I have a list of of columns where each column has an html table in it. I am using jquery ui sortable to support dragging table rows within a table as well as from one table to another similar to this jquery ui sortable demo (but with many more columns)

The one issue i ran into is that if i have many columns, I can't seem to support both of these requirements below at the same time:

The requirement to have vertical scrollbar in my table if it exceeds a certain size to avoid a overall page vertical scroll bar
For "wide" pages with many lists I do want a horizontal scroll bar (to avoid wrapping) but when I drag something all of the way to the right, i would like the horizontal scroll bar to scroll along with me so I can drag an item from the first list to the last list all the way to the right without having to directly click on the horizontal scroll bar.

It seems #2 comes out of the box (as per the jsFiddle below) but if i try to get #1 working, it breaks #2. I know its possible at some level as i see sites (like trello for example) that support both requirements above but i can't figure out how they are doing it.

Here is my css:

#allLists {
bottom: 12px;
left: 0;
position: absolute;
right: 0;
top: 10px;
white-space: nowrap;
}

.swimTableTbody {
 display: block;
 overflow: auto;  //this is what allows me to have vertical scroll bars on long tables
 width: 100%;
}

.list {
display: inline-block;
width: 300px;
top: 80px;
position: relative;
}

Here is my jquery code:

        $(".sortable").sortable({
            connectWith: ".sortable",
            placeholder: "ui-state-highlight",
            scroll: true,
            helper: function(e, tr)
            {
                var $originals = tr.children();
                var $helper = tr.clone();
                $helper.children().each(function(index)
                {
                    $(this).width($originals.eq(index).width());
                });
                $helper.css("background-color", "rgb(223, 240, 249)");
                return $helper;
            }
        });
        $("#sortable").disableSelection();

and here is a snippet of my HTML to show what i am rendering:

<div id="allLists">

<span class="list">
<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

    </tbody>
</table>

</span>

<span class="list">

<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

        <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content</td>
        </tr>
    </tbody>
</table>
</div>

Update

As pointed out below, I am able to get #2 above working out of the box by removing this line

   overflow: auto;   // remove this line

from this css:

 .swimTableTbody {
   display: block;
   overflow: auto;   // remove this line
   width: 100%; 
 }

but if i do that, i break #1 from working and instead of getting the vertical scrollbar in my individual tables, i get a vertical scroll bar for the whole page which is something i don't want.

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

Using the helper function seems to solve the horizontal scroll issue.

$(function () {
    $(".connectedSortable").sortable({
        connectWith: ".connectedSortable",
        start: function (event, ui) {
             $('body').scrollParent();
        },
        helper: function (e, tr) {

                var $helper = tr.clone();

                 $('#board').append('<div id="clone" style="padding:4px 3px;border:1px solid #DBDBDB;background-color:rgb(223, 240, 249)">' + $helper.html() + '</div>');
                 $("#clone").hide();
                 setTimeout(function () {
                     $('#clone').appendTo('body');
                     $("#clone").show();
                 }, 1);
                 return $("#clone");

        }
    }).disableSelection();
});

Work Example: http://jsfiddle.net/9kFu8/3/

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

edited May 23 '17 at 11:52

Community

1
1

answered Jan 20 '14 at 19:48

JSuar

21,056
4
39
83

I edited your answer so it would clone just the one item (not the full list) but since you got me in the right direction i have accepted the answer and awarded the bounty – leora Jan 23 '14 at 04:57
Glad I could help. Thanks for editing the code. I was having a hard time getting the clone to be one item rather than the whole list. – JSuar Jan 23 '14 at 20:40
one issue i realized is that with you answer it seems like you have to drag up and down when you get to the edge of the window to have the auto scrolling work (instead of just holding down right or left (depending which direction). do you know any way around this? – leora Feb 15 '14 at 19:28
I'll need to play around with it some more. Here are a few ideas for now. 1) Implement a carousel solution ([such as this](http://www.khazar.com/academics/portal/canada/2011spring/mart369/javascript/jmycarousel.htm)) to handle the hover action. 2) [Increase the sensitivity of the scroll](http://api.jqueryui.com/sortable/#option-scrollSensitivity). Won't solve the problem but makes scrolling easier. 3. [This hover solution.](http://stackoverflow.com/questions/18188952/scroll-on-hover-click-for-speed) – JSuar Feb 15 '14 at 21:08
@leora will you accept this answer again now that it's been determined that the horizontal scroll issue was outside the scope of this question? – JSuar Feb 18 '14 at 19:13

score 0 · Answer 2 · answered Jan 17 '14 at 10:42

0

I made a fiddle with your code and it recreates the problem for me. http://jsfiddle.net/52gaw/

Here is the fiddle with just one line removed. http://jsfiddle.net/52gaw/1/

.swimTableTbody {
    display: block;
    overflow: auto;   // remove this line
    width: 100%;
}

The issue is caused by the overflow: auto; line. Just remove it and it works like you want.

answered Jan 17 '14 at 10:42

CRABOLO

8,605
39
41
68

hmm, so thanks for responding. I agree that this fixes the horizontal dragging and scrolling issue, but then it breaks this requirement: http://stackoverflow.com/questions/21169865/on-a-web-page-how-can-i-have-a-scroll-bar-just-for-a-certain-section. Any idea if there is a way to have both this dragging behavior but still have the vertical scrolling within this table – leora Jan 17 '14 at 12:02
I updated the question to reflect the latest description of this issue – leora Jan 17 '14 at 12:14

How can I have an element with "overflow-y: auto" but still allow the browser to scroll when i drag an item horizontally using jquery ui sortable?

Update

2 Answers2

Linked