Jquery selectable scrollable

Question

I'm having a major issue with making selectables scroll. The ticket was submitted to Jquery UI a long time ago, and I don't think it's been resolved.

I have a number of selectable items on a scrolling selectable div. If I begin selecting, and then scroll up twenty pixels, then the actual selection area of the selection box is twenty pixels below the top of the visual selection box. Basically, the visual selectable box moves with the scroll, but the selection area stays where it was, which creates a discrepancy.

Jquery Bug Log: - http://bugs.jqueryui.com/ticket/3223

Example of the problem(jfiddle): - http://jsfiddle.net/bY3pE/5/

Sevearl weeks ago, I had the same problem, and I found a post here, on stackoverflow that addressed it. An answerer proposed a plugin he had written which allowed one to select a list of 'selectables', by clicking on the first one, then shift clicking on the last one to slect. One could also control-click to select non-consecutive items.

Since my laptop crashed, I lost the plugin I was using, and I have spent 2+ hrs searching for it online with no luck.

Can somebody please suggest a plugin I can use to create a similar functionality.

Answer 1

That's what you're looking for: http://plugins.jquery.com/ui-selectableScroll/

As the description says, it's "An extended jQuery-ui selectable with scroll capabilities". That means, this using this selectable instead of the original will scroll your container into both directions.

I needed it too, so I coded it, and you can have it.

Answer 2

Alternatively, @battlehorse has a nice replacement for jQuery UI Selectable that supports scrolling while selecting. Saved me a good few days of work (if not weeks)

Answer 3

I found the post I was talking about!

THis may be a valid alternative for people who need shift-click functionality and scrolling selection as well. Check out the following post.

Enable Shift-Multiselect in jQuery UI Selectable