-1

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.

enter image description here

enter image description here

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

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • There is no horizontal scrollbar – Zach Saucier Feb 16 '14 at 00:05
  • 1
    @Zash Saucier - what do you mean. As i said in my question you have to make sure the width of the screen (or that section is not to wide) – leora Feb 16 '14 at 03:01
  • I mean even if my window is 100px wide, the elements are wrapping to the next line, thus no scroll bar appears – Zach Saucier Feb 16 '14 at 03:06
  • that is weird as i don't see this (i am using chrome). if you see in the css, i have this line: white-space: nowrap; which keeps its from doing a wrap – leora Feb 16 '14 at 03:10
  • Interesting, I'm in Chrome as well. Floating elements wrap as `white-space: nowrap` does not work for block elements but only for inline elements and text. [Changing them from floats to `display:inline`](http://jsfiddle.net/Zeaklous/d3qLx/5/) makes them have a horizontal bar. Is that what you want? – Zach Saucier Feb 16 '14 at 03:52
  • @ZachSaucier - I added a screenshot of what i see in my jsFiddle. as you can see the fifth and sixth rows don't wrap and instead will show up after dragging to the right and scrolling (im on a mac so horizontal scroll bar only shows up when i actually scroll which is hard to screenshot). Do you see something different? – leora Feb 16 '14 at 04:47
  • (`whitespace:nowrap` should have no effect on floating elements, I think you need `display:inline-block` instead) I would recommend using an overlay on either end to ease the horizontal scroll. Using a pluging like [jQuery Smooth Scroll](http://www.smoothdivscroll.com/index.html#toc) would make it pretty easy, though you could create a custom one if you want. Essentially you'd only allow the smooth scroll if one of the elements is being dragged – Zach Saucier Feb 16 '14 at 20:24
  • @ZachSaucier - Just to make sure i understand you correctly. Is this a limitation of the default browser drag and srcrolling or an issue with jquery ui sortable? I would have thought this would be a simpler way to get this expected behavior without additional plugins, etc . . – leora Feb 17 '14 at 16:21
  • @leora Zach Saucier's recommendation is exactly what [I was recommending in my follow up to your comment.](http://stackoverflow.com/questions/21177327/how-can-i-have-an-element-with-overflow-y-auto-but-still-allow-the-browser-to/21242815#comment32993527_21242815) Plugins exists that will solve this scroll issue ([#1 on my orig. comment](http://www.khazar.com/academics/portal/canada/2011spring/mart369/javascript/jmycarousel.htm)). There are lightweight solutions you could implement yourself ([#3 on my orig. comment](http://stackoverflow.com/questions/18188952/scroll-on-hover-click-for-speed)). – JSuar Feb 17 '14 at 17:11
  • @leora It's a browser issue, you need to work around it as JSuar suggests – Zach Saucier Feb 17 '14 at 19:46
  • For proper fiddle, http://jsfiddle.net/d3qLx/6/ – Mr. Alien Feb 18 '14 at 18:18
  • @Mr. Alien - i see the same scrolling choppy issue in your fiddle – leora Feb 19 '14 at 12:45
  • @leora Your fiddle was not proper as you were using floats, so I just fixed that, I didn't fixed your issue else would've answered as I didn't understood your question at first place :) – Mr. Alien Feb 19 '14 at 13:07
  • @Mr. Alien - I just took the css directly from the jquery sortable example page: https://jqueryui.com/sortable/#connect-lists – leora Feb 19 '14 at 15:15
  • @ZachSaucier - it looks like this other question is dealing with the same issue (although the problem vertically): http://stackoverflow.com/questions/3739419/jquery-sortable-and-automatic-scrolling – leora Feb 20 '14 at 00:35
  • Do not use URL shorteners to work around deliberate quality filters. – Flexo Mar 05 '14 at 09:02

1 Answers1

2

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.

Nelson Menezes
  • 2,036
  • 14
  • 15