Question

I have a table with some rows and and cells. Using jQuery UI Selectable how can I customize the selection so it’s only possible to select cells following each other. It shouldn’t be possible to select cells vertically across rows without selecting the cells between.

Any solutions?

Answer 1

Use the selected callback to add a class to the selected element; The class which you will use to tie .selectable(). You can then use the next siblings selector in combination with this, and you should be able to accomplish what you need.

To start off, you’re going to want something like the following:

<ol>
    <li class="ui-widget-content ui-selectee">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

Then, as you select one, which will fire the callback, you want to make the second selectable.

<ol>
    <li class="ui-widget-content ui-selectee ui-selected">Item 1</li>
    <li class="ui-widget-content ui-selectee">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ol>

And so on.