ehynds
Add Range / Drag Selection
I'm submitting a ...
- bug report
- [x] feature request
- question
What is the current behavior?
Cannot use shift + click to select a range of options and cannot drag select several options at once like is possible in the native select. The multiselect does not support these.
What is the expected behavior?
I would like to see range selection and drag selection supported like in the native select. This would require drag functionality to be added (does not exist now) which would also enable the resize capability to be redesigned to not need the resizable widget in the future.
Range selection could probably be added relatively quickly... It is the drag selection that will take some thought, since it would utilize mouseenter / mouseleave events that are already bound to handlers for the check boxes.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo
Common options for demos are jsfiddle and codepen
If you are requesting a new or changed feature, please provide a rationale
It is supported in the native select and should be possible to add in the multiselect.
Please tell us about your setup
- Version: 3
- Browser: Chrome
- Other frameworks in use:
@mlh758
Some more thoughts on this... Re: drag selection
I found the following to be helpful: http://techslides.com/resize-and-drag-elements-with-javascript
The mouse event handler logic for drag resizing and drag selection should be somewhat similar.
Looking at http://jsfiddle.net/3jMQD/614/ ... I think the dragging should be doable w/ mousedown, mouseup, and mousemove event listeners and some associated logic.
The challenge with a drag select may be how to indicate to the user that a list item is selected via drag. I had the thought to just simulate a click() as the mouse is dragged over items to check the check boxes. A multi-item highlight could also be done, but that is not currently being done anywhere in the widget, so some logic would have to be introduced for managing that.