Search jQuery

jQuery Forum

UI Selectable - selecting all between start and stop

in Using jQuery UI • 8 years ago

Reference: http://jqueryui.com/selectable/#display-grid

With the demo in grid view, a "drag start" over the "1" box to a "drag stop" over the 6 box will cause boxes 1, 2, 5 and 6 to be selected:

◼◼◻◻

◻◻◻◻

I'd like to change that behavior (or add a new option that changes that behavior) such that all the boxes between drag start and stop are selected (i.e., 1, 2, 3, 4, 5 and 6 -- the same as would be selected when dragging from 1 to 6 in list view).

◼◼◼◼

◼◼◻◻

◻◻◻◻

I'm too new to jQuery and jQuery UI to know how to approach this. I've looked through the jQuery UI code but can't really tell from that how to proceed.

Any ideas/suggestions?

Replies(3)

jakecigar

Re: UI Selectable - selecting all between start and stop

8 years ago

Selectable is written to select a contiguous square of elements. You can add more contiguous squares by holding down control.

If you want "down on 1" and "up on 6" to select 1-6, you would have to use/write a different plugin/widget. It’s not going to be easy to patch selectable.

JΛ̊KE

Paul Pome..

Re: UI Selectable - selecting all between start and stop

8 years ago

Thanks, Jake. It looks like what I'd need is a callback in the _mouseDrag function that would allow me to do my own "hit" detection, replacing what's defined there. I suppose I'll have to write my own ...

It seems a bit presumptuous of the designers to have defined "grid selecting" in this way -- or only in this way. Selecting based upon what's within or touched by a 2-dimensional shape is a completely different concept than when selecting everything between two elements (as is done when selecting items in a list). I get why they would want to support the kind of selecting they used, but being able to select a sequential series of elements between start and stop elements (inclusive) is valid/useful regardless of whether the items are in a list or a grid.

Case in point, here's what I'm trying to accomplish (selecting a sequential series of measures for playback - measures 7-10 in this example):