Skip to content
This repository has been archived by the owner on Jun 1, 2024. It is now read-only.

How does it work

Jump to bottom
László Károlyi edited this page Apr 2, 2014 · 8 revisions

Since this plugin is an extension of the original ui-selectable, please look for the documentation on how it works: http://api.jqueryui.com/selectable/

The slight difference is, the selector lasso helper can't be pulled outside of the selectable-scrollable container, showing where the parent container should start scrolling. Now, it also watches for scrollbars.

Importing selectableScroll

  1. Import jQuery/jQuery-ui (with the original ui-selectable) in the <head> tag first, then the plugin.
  2. If you want to use the modified selector lasso (where sides disappearing when scrolling out of viewport), import the jquery-ui-ext.css after jQuery ui's own css file.

Initializing selectableScroll on the container

  1. Initialize the selectable on the parent container of selectables (the scrollable element). Options are the same to the original ui-selectable, extended with these (copied from source):
scrollSnapX: 5, // When the selection is that pixels near to the top/bottom edges, start to scroll
scrollSnapY: 5, // When the selection is that pixels near to the side edges, start to scroll
scrollAmount: 25, // In pixels
scrollIntervalTime: 100 // In milliseconds

  1. Profit!

  2. It is important to mention that all the events the original selectable emits, are now becoming to selectablescrollstop for example, that means, selectable gets selectablescroll in all the expected events.

Clone this wiki locally