Why can't I get jquery ui sortable to have a "smooth" horizontal auto scroll?

Question

I have a web page that uses jquery UI sortable with connectwith to have a list of lists (think similar to trello). One issue is that i can't seem to get a smooth horizontal auto scroll when the number of columns exceeds the window width. So when the horizontal scroll get enacted when I drag an item to the right I have to also drag a bit up or down to get the scroll bar to move to the right (instead of just doing it by dragging directly right without this extra fiddling).

Here is a jsfiddle example of my code that shows the behavior. Try to take an item from the first column and put it on the last list to the right.

NOTE: you must make the windows not too wide to make sure that all 6 "columns" aren't visible to get the behavior. Once you do this, if you see the horizontal scroll gets "choppy" after you get to the edge.

Is there anyway to get a smooth horizontal auto scrolling when using jquery ui sortable

Answer 1

Like Zach Saucier mentioned in the comments, your example doesn't trigger horizontal scrolling. Replacing float: left with display: inline-block does work as you describe, though.

To solve your problem, try adding the scrollSensitivity: 100 to the list of options to the sortable call, e.g.:

$(function () {
  $("#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6").sortable({
    connectWith: ".connectedSortable",
    scrollSensitivity: 100
  }).disableSelection();
});

Adjust value as needed. This is referred to in the API.